Skip to main content

Container components

DIV​

Simple container with an embedded dropzone. Is used to layout with divs.

Additional General properties​

  • Float - corresponds to css property float. Default value is None.
  • Display - corresponds to css property display. Default valued not defined.

Grid layout​

Layout component which simplifies layout flexibility. Component draws several panes, position and size of which can be changed. Created on React-Grid-Layout basis.

Additional General properties​

  • Columns - Number of columns in this layout.
  • Draggable - if this checkbox is checked, its component drawn panes can de dragged.
  • Resizable - if this checkbox is checked, you can resize component drawn panes.
  • Scroll - if this checkbox is checked and if content size exceeds pane size, scroll will appear. Otherwise, only part of such content fitting pane size will be displayed.
  • Panes - you can set panes in this table which will display the component. Each pane description consists of the following properties:
    • Title - pane header.
    • CSS Class - style name (without a "." symbol in the beginning of the name), applied to pane.
    • Visible Condition - function which returns true or false. It is similar to Visible Condition function in Other tab. Defines pane visibility.

When editing Grid layout component in Form Builder, you can set panes location and size in Preview mode.

Events​

  • onLayoutChange - event is called after each pane resizing or pane dragging.

Form​

Other components can be put in this form. Such components as Button, Input, Checkbox, TextArea, Dropdown - if put in the form, will be drawn as form fields. Created on SemanticUI Form basis. Components (fields) in which document attributes are edited, do not have to be put inside form. If these components are stored outside form (for example, in divs), their values change will work the same way as if they have been stored inside form. However, using Form component will allow you to organize and improve document editing forms appearance.

Additional General properties​

  • Size - defines size for all components in the Form. Is used for quick size setting.

Events​

  • onSubmit - The HTML form submit handler. Actually, if you're using this component in DWKit, this event is unnecessary.

Form Group​

This component is used inside the Form component to organize form elements. With it, you can set vertical or horizontal form elements position. Also, Form Group can contain other Form Groups. If you position components (fields) in which document attributes are edited inside the Form component, it is recommended to always position them in to the Form Group component, which in turn will be placed in this Form component.

Additional General properties​

  • Type - Columns or Rows, defines component drawing orientation in Form Group. Columns are horizontal, Rows are vertical.
  • Width - Equal or Custom, defines component width division method. If Equal - component width will be equally divided between all its subsidiary components. If Custom, it is necessary to set a number between 1 nd 16 to define a number of parts Form Group width will be divided into. If you place one (subsidiary) Form Group into another (parent) Form Group, two conditions must be observed for correct drawing of such a construction:
  • Width = Custom with a required number of columns must be set for parent Form Group.
    OR
  • Width in Style tab must be set for subsidiary Form Group.

Tab​

Is used to draw interface with tabs. I.e. when we are working with groups of components, we switch between tabs by clicking on the menu. It is created on SemanticUI Tab basis. To form content for each tab just switch between them in Form Builder and drag components you need to relevant dropzones.

Additional General properties​

  • Pointing - tab menu can point to show its connection to nearby content.
  • Secondary - tab menu can adjust its appearance to de-emphasize its contents.
  • Tabular - a tab menu can be formatted to show tabs.
  • Fluid - vertical tab menu may take the size of its container.
  • Vertical - vertical tab menu displays elements vertically.

Pointing, Secondary, Tabular, Fluid, Vertical properties work similar to Menu component properties.

  • Panes - menu tabs list. Each tab can be defined by two properties.
    • Title - Displayed tab name.
    • Visible Condition - function which returns true or false. It is similar to Visible Condition function in Other tab. Defines tab visibility.

Events​

  • onTabChange - event is called when switching between tabs.

Custom block​

It is used to embed other forms into the current form and to mark custom dropzones when creating forms Templates. Depending on property value, Source Type works in on of the three modes.

  • Source Type = Form Name - embeds a form which name is set in the Form Name property into the current form.
  • Source Type = JSON source - embeds into the current form another form built on the current form JSON description. JSON description format is similar to the current form. Embedded form JSON description value is set in the JSON source property.
  • Source Type = Placeholder - Custom block does not embed anything in this component, but defines a position other components can be embedded into if this form is a template. I.e. using this component we mark positions in the template to put other components. In other words, we are creating custom dropzones. Learn more.

Static content​

Displays text or HTML static content.

Additional General properties​

  • Font size - sets font size in which content will be drawn.
  • Allow HTML - if checked, HTML markup can be static content.
  • Value - static content actual value.