Blocks

Blocks include items such as column(s), page, row(s), etc. This block items works as a placeholder for the input or action items to be placed.

To add a block item, simply drag and drop under the desired level. The block item will not show up in the form itself but creates a canvas for adding input items and/or action items. Hence, a block item need to be added before any input or action item can be displayed in the form. The properties for each block item varies.

Column

A column item allows you to add a single column onto the form, as well as defining its width. It has the following properties.

Item Description Default
Id Name of the column that will be displayed in the form structure. “columnX”
Label Name of the column that will be displayed in the form. None
Minimum Width Minimum width of the column. 20rem
Maximum Width Maximum width of the column. If not defined, the width of the device is used.

Columns

Columns acts as a placeholder that allows multiple single columns to be added onto the form. It is particularly useful when you need to show or hide some inputs based on previous selection using the rules being set up prior.

It has the following properties.

Item Description Default
Id Name of the multiple columns that will be displayed in the form structure. “columnsX”
Label Name of the multiple columns that will be displayed in the form. None

Page

This item allows you to create a multiple-paged form. It has the following properties.

Item Description Default
Id Name of the page that will be displayed in the form structure. “pageX”
Label Name of the page that will be displayed in the form. None
Validator Chain Selects the ETL chain to validate the form.
The “root” need to define the ETL chainset for the form before this field has any option to select.
None

Row/Rows

This allows you to add a row or multiple rows onto the form. A row only allows you to add input or action item in a single row while multiple rows, as the name implies, allows you to add multiple rows of input or action items.

It has the following properties.

Item Description Default
Id Name of the row or multiple rows that will be displayed in the form structure. “rowX”
Label Name of the row or multiple rows that will be displayed in the form. None

Tab Bar

This item along with the Tab Panels, allows you to create form with multiple tabs. It puts a placeholder in the form to display the names of the tab panels that were added into the form under it.

It has the following properties.

Item Description Default
Id Name of the tab bar that will be displayed in the form structure. “tab-barX”

If no tab panels are added onto the form under the tab bar, the tab bar will not be visible in the form. Once tab panels are added under the tab bar, the labels of the tab panels will appear in the tab bar.

Tab Panel

This item along with the Tab Bar, allows you to create form with multiple tabs. The Tab Panels are to be added under the tab bar.

It has the following properties.

Item Description Default
Id Name of the tab panel that will be displayed in the form structure. “tab-panelX”
Label Name of the tab panel that will be displayed in the form. None

Example: Using Tab Bar and Tab Panels

The simple example below creates a form with two tabs.

Create a form with the following items under the root. The Tab Bar (tab-bar1) is first added to the root, which places a placeholder to display the labels of the subsequent tab panels that are added.

Two Tab Panels (tab-panel1 and tab-panel2) are added under tab-bar1. Change the value in “Label” fields as “Info” and “Comments” for tab-panel1 and tab-panel2 respectively.

The two labels will appear in the Tab Bar (tab-bar). This will allow you to switch between the two tabs. Add the Input items into the two Tab Panels and the Action item onto the root. Do note that the Input items will appear in the right panel of the Form Designer according to the sequence they are added into the form structure.

To test the form, click on the “More Actions” icon at the upper right corner of the Top Row and select “Run Form”.

In the “Run Form” dialog box, select the “No Workflow” option (as this is just an example, there are no workflow). Click on the “OK” button to run the form.

In the tab that the form appears, the default tab will be the first tab, in this case, its the “Info” tab. To go to the next tab, click on the tab “Comments” at the top.