DWKit in its frontend displays forms which as a rule are created in DWKit admin panel. In this section we're going to describe all aspects connected with forms creation and binding data to forms. You can read about writing server code to handle form events and manipulate data in the Server side section. As for writing client code to handle events from form components - learn more about it in the following section: Client side.
Form editing implementation in DWKit
Any developer (or advance user) of the system created on DWKit basis, usually creates forms in the Manage forms section in admin panel.
When creating a form, DWKit component interface is launched, which is called Form Builder. See
example here. If we go further into detail, we'll learn that React
<DWKitFormBuilder/> from optimajet-builder.js library is embedded in admin panel. It is responsible for form editor display
and transforming visual markdown of the edited form into text markdown in JSON format. Everything that you edit in Form Builder will be
saved in JSON file. Also, there's a Preview mode in the form editor. Turn it on to see how this form will look like in users' eyes. We
recommend to watch this video Form builder in DWKit and building your first form, to understand the process of form
creation and editing.
Storing forms in DWKit
DWKit stores JSON description of a form in the file system. By default, forms will be stored in the Metadata/Forms folder, ASP.NET Core MVC of DWKit project. In all our examples and starter packs this project is called OptimaJet.DWKit.StarterApplication. Thus, you can use your favorite VCS (for example, git) for group development and control of form versions. Each form is represented by several files. You must also take into account that DWKit searches for forms by name without register. Let's say you have created a form and named it 'MyFormName'. Then you will have the following files in your Metadata/Forms folder:
- MyFormName.json - required file. It contains a list of all form components and their settings. This is the information by which DWKit renders forms for users.
- MyFormName-settings.json - non-required file. Contains information on binding forms to data, workflow and security system. Also contains other form settings, including checking whether form is Template.
Form display in DWKit
By default, forms are displayed by host:port/form/MyFormName url. optimajet-app.js library, which is responsible for UI display to end
user, received JSON forms from server and displays forms using
<DWKitForm/> component from the optimajet-builder.js library. In the
optimajet-app.js library form is initially integrated with DWKit frontend events system and linked to the global state of the client
application. Form requests from server are handled by UserInterfaceController
Binding forms to data in DWKit
To display data in forms you must describe its binding to data. Usually developers (or advanced users) of the system created on DWKit basis edit form binding to data in the Mapping data model section of the admin panel. For example, check out this demo. When binding forms to data you can define which data will be displayed in form components, set server triggers which activate when loading or changing data, and define additional filters. It is also recommended to watch the following video: Mapping form and data, creating data collections to understand how to bind forms to data most efficiently.