Skip to main content

Builder

Form Builder Interface

Form Builder interface has the following appearance:

Form builder

Its control elements have the following functions:

  1. Form erasure, i.e., deleting all form elements.
  2. Form upload from JSON file.
  3. Downloading form layout as JSON file.
  4. Open the form in FormViewer for debugging.
  5. Toggle between form edit mode and form preview mode.
  6. Dropzones. You will drag and drop components from panel 7 to these zones, when editing a form.
  7. Component panel. Drag components from here to dropzones 6, when editing a form. We will define each component and its properties in documentation below.

Elements 8 - 12 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 10 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

There are four basic component types.

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

DWKitFormBuilder component

The form builder which allows you to create and change forms with Drag&Drop. Works in two modes - Preview and Builder.

import {DWKitFormBuilder} from "./scripts/optimajet-builder.js";

...

<DWKitFormBuilder
actions={actions}
getFormFunc={this.getForm.bind(this)}
getFormList={this.getFormList.bind(this)}
getAdditionalDataForControl={this.getAdditionalDataForControl.bind(this)}
ref={(builder) => { this.builder = builder; }}
templates={templates} />
/>

Parameters:

#ParameterTypeComment
1actionsArrayList of actions for events
2getFormFuncfunction(name) { ... }Callback function for getting source form by name
3getAdditionalDataForControlfunction(control, {startIndex, pageSize, filters, sort, model}, callback) { ... }Additional data request. Used in pager controls, such as Dictionary and GridView.
4localizationObjectObject with language constants for localization
5templatesArrayTemplates list
6downloadUrlstringThe url for downloading files. Use for controls which operate files
7uploadUrlstringThe url for uploading files. Use for controls which operate files.