This example demonstrates how to generate forms in JSON format based on strongly-typed domain models and vice versa. Generated forms can be displayed by SurveyJS Form Library and edited in Survey Creator. This solution will be beneficial for content and product managers who regularly create forms and for backend developers who implement domain models based on these forms.
This application was built using ASP.NET Core. Follow the same instructions if you need to implement this functionality with any other server-side framework.
- Domain Models and Attributes
- Generate Form JSON Schemas from Server-Side Domain Models
- Display a Form
- Edit JSON Schemas
- Generate Domain Model Code Based on Form JSON Schemas
Domain models are declared in server-side code. You can generate form JSON schemas based on them. Domain model properties become form fields. You can then feed the JSON schemas into SurveyJS Form Library to display a form on your website or in your application. This project contains three sample domain models; each describes an individual form:
A domain model and its properties can include attributes. A form generator uses attribute parameters to generate form JSON schemas. For instance, all domain models have the DomainModelForm attribute shown below. Its parameters configure a form's name and title properties.
[DomainModelForm("nps-survey", "NPS Survey (Domain Model without attributes)")]
public class NPSSurvey: DomainModel {
// ...
}A form generator can support predefined .NET attributes, such as Required or Display, as well as custom attributes, like DomainModelForm. The following file shows how this project implements custom attributes: FormAttributes.cs.
You can get a list of all domain models in the running assembly. Call the DomainModelList.GetAllForms() static method. It finds all classes that are inherited from DomainModel and have the DomainModelForm attribute. Refer to the following file for full code: DomainModelList.cs.
Form JSON schemas are generated based on property types and attributes. Each public writable property in a DomainModel class becomes a form field in the form JSON schema. Refer to the JSONGeneratorByModelClass class to view the form generator code. The class implements a Generate() method that extracts all properties from a domain model, gets their type and attributes, and uses this information to build a JSON schema. You can extend the form generator's functionality: implement new custom attributes or add more properties to the existing attributes.
SurveyJS ships with a tool that displays surveys and forms—SurveyJS Form Library. You no longer need to create a separate page for each form you have in your application. Set up SurveyJS Form Library and assign different JSON schemas to it to display different forms. This tool supports all most popular JavaScript frameworks, including React, Angular, and Vue. However, this project uses the Form Library version for Knockout because it is the easiest version to set up. The FormResponse.cshtml file shows the Form Library configuration code.
In this project, SurveyJS Form Library displays JSON schemas that come from different sources. The "NPS Survey" and "Patient Assessment" forms are pre-generated and stored as JSON files in the Data directory. The "Job Application" form is generated from the JobApplication domain model on the fly. If a form JSON schema has been edited, its most recent version is stored in a database (or database emulator, as in this application). When Form Library requests a JSON schema of a certain type, the server first searches for the most recently edited schema of that type in the database. If the schema is not found, the server returns a pre-generated schema from one of the JSON files. If a file with a schema of that type is also absent, the server generates the schema on the fly. Refer to the following file to find methods that implement this logic: JsonForms.cs.
JSON schemas can be edited in any text editor, but they are easier to edit in Survey Creator. This JavaScript component is a UI form designer by SurveyJS that content and product managers can use to create and modify JSON schemas without writing code. Similarly to SurveyJS Form Library, Survey Creator supports React, Angular, Vue, Knockout, and jQuery and is easy to integrate into your application. The project in this repository sets up the Knockout version (view the EditForm.cshtml file).
If in your team, more than one person creates and edits forms, you can configure multiple roles with different access rights. For example, you may define two roles: content manager and product manager. Content managers cannot create new forms and can edit only those form properties that do not require server-side code modification. These restrictions ensure the synchronization between domain models and form JSON schemas. Product managers, on the other hand, have unlimited capabilities and can request the backend development team to update domain models on the server. The role separation is implemented at the Survey Creator level. Refer to the creatorjs.js file to see the implementation. You can also view the restricted UI for content managers in the following demo: Setup for Content Managers.
To make edited schemas available to the users, you do not need to wait until the backend development team rebuilds and redeploys the entire application. Edited schemas are saved in a database, and you can implement the functionality to prioritize them when SurveyJS Form Library loads a schema for display (see the Display a Form section above). As a result, users can use an edited form immediately after the content or product manager modifies it. If the schema modification requires an update of domain models to maintain the model–schema synchronization, the backend development team may perform this update and rebuild and redeploy the application according to their own schedule.
Previously, you saw how to implement a form generator that creates JSON schemas for client-side forms based on server-side domain models. You can also implement code that does the opposite—generates domain model code based on JSON schemas. This capability saves time for backend developers who implement domain models based on JSON schemas created by product managers.
To implement a domain model generator, you need to parse the JSON schema being edited and convert the form fields to model properties. Users can view the generated domain model code under the Domain Model Code tab when they edit a form in Survey Creator as a product manager. View the following demo to see this functionality in action: Create Domain Models. Refer to the following file for full code: codegenerator.js.