Skip to main content

Form Builder

Tutorial​

In this video you will learn how to create forms in Form Builder.

Form Builder Interface​

Form Builder interface has the following appearance:

Form builder

Its control elements have the following functions:

  1. Link to the list of all forms in the system.
  2. Opened form name.
  3. Link to the open form and data mapping. Learn more.
  4. Link to the opened form action handlers. Learn more.
  5. Indicates that this form is a template and can be embedded into other forms. Learn more.
  6. Toggle between form edit mode and form preview mode.
  7. Form Builder full-screen mode switch.
  8. Form erasure, i.e., deleting all form elements.
  9. Saving forms to server.
  10. Downloading form layout as JSON file.
  11. Form upload from JSON file.
  12. Opens window for editing form link to one or several workflow schemes. Learn more.
  13. Opens window for editing form link to a group of permissions. Learn more.
  14. Dropzones. You will drag and drop components from panel 15 to these zones, when editing a form.
  15. Component panel. Drag components from here to dropzones 14, when editing a form. We will define each component and its properties in documentation below.

Elements 16 - 20 are control menus for each component. There are similar component menus in forms.

  1. Displays component Name property.
  2. Control element with which you can drag component to any dropzone.
  3. Click this button to open property editing window for each component.
  4. Component copying button. Copied element will reserve all settings, but will have a different Name property value.
  5. Click this button to delete component from form.

Component properties editing interface​

When clicking component properties editing button 18 component properties window will open. See picture below.

Component properties

Some properties are unique for each component, some are general. All common properties are described here. All tabs divide component properties into the following groups:

  • General - basic component settings which define its behavior and appearance.
  • Style - component css styles settings.
  • Events - defines which actions will be called upon certain component events.
  • Tooltip - tooltips display settings. Tooltips are used as help and to display validation errors.
  • Other - here you can set client validation, component visibility and component editability functions.

Component types in DWKit​

There are four basic component types in DWKit.

  • Containers - components which can contain other components. For example, tabs, forms and other layouts.
  • Controls - form basic components. For example, inputs, dropdowns, headers, dictionaries.
  • Collections - grid-like components which display multiple records.
  • Charts - report display diagrams.