Skip to main content

Forms. Introduction

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.

Video tutorial​

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 component <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.
  • MyFormName-code.js - non-required file. Contains client actions handlers code, i.e. JavaScript code, which handles events from form components. At least one MyFormName.json file is required to display form.

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 controller.

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.