Form

The Form tab consists of two panels. The left panel displays the hierarchy, the components and their properties of the form. The right panel displays the form, allowing to to visualise the form as you design it.

The left panel displays the available actions for the selected component in the form. It has three parts; the top row, form structure in the middle and component properties at the bottom.

Top Row

The top row consists of a selection for the type of components to be added into the form and some icons.

Item Description
Types of Options List the available types of options for the form.
Available options:
- Actions
- Blocks
- Inputs
- Others
Undo Undo the last action on the form.
Redo Redo the last action on the form.
More Actions List of other actions for the form.

The icons will grey out if there is no action to perform (e.g., no action to redo).

More Actions

The list of more actions are listed in the table below.

Item Description
Show/Hide Construction Line Toggle to show or hide the construction lines in the form area to better see the alignment of the components.
Cut Cuts the selected component and adds onto clipboard.
Not available for root.
Copy Copies the selected component and adds onto clipboard.
Not available for root.
Paste Pastes the component from the clipboard onto the form.
Delete Deletes the selected component from the form.
Not available for root.
Download Form Downloads the form.
Run Form Runs the form in another tab or as per defined in the form.

Note that if the component in the form does not allow certain actions, those icons will not be available. For example, the root cannot be deleted, so the “Cut” and “Delete” icons will not appear.

You can toggle between showing or hiding the construction lines in the form by clicking on the “Show/Hide Construction Line” icon.

The “Run Form” icon allows you to test the form. To do so, select the “Run Form” and a “Run Form” dialog box will appear.

Select the appropriate option and click on the “OK” button to run the form. The form will appear in another tab or as per defined in the form.

Form Structure

The form structure allows you to design the structure of the form, as well as add pages, inputs fields, actions, etc. onto the form.

Every form begins with a root, which other components can be added onto it.

The list of available components vary according to the “Types of Options” selected in the top row’s drop-down list. By default, “Blocks” is selected.

The table below list of available actions for the “Types of Options”.

Item Description
Actions List the available action components for the form, such as Button Bar.
Blocks List the block components that can be added onto the form, such as columns, rows, etc.
Inputs List of input components that can be added onto the form, such as checkbox, radio button, etc.
Others List of miscellaneous components that can be added onto the form, such as workflow state, HTML, etc.

To add a component onto the form, first select the “Type of Options” in the top row. The available components will be displayed in the Form Structure section. Simply drag and drop the desired component onto the desired higher level.

In the simple example below, a new form is created, which includes a input text field and a submit button. First, under the “Blocks” option, select “Column” and drag it to the “root”. Next, under the “Inputs” option, select “Text Input” and drag it to the column. Lastly, add a “Button Bar” under the “Actions” option to the column.

To add a page to the form, select “Blocks” from top row and select the “Page” icon on the left panel in the “Form Structure” section. Drag and drop the “Page” onto “root”. The new page will be added at the bottom of the “root” by default, if there are any components added onto the form prior adding the page. You can relocate the new page by drag and drop it to a new location in the form structure.

Note that the default name (or Id) of components added onto “root” will always start with the number “1”. For example, when the first text input is added, the default name will be “text-input1”, the next text input will have the default name of “text-input2” and so on. Unless the first such component is renamed (i.e., first text input name is renamed to “TextBox”), then the second text input component will be named “text-input1” instead. This numbering method applies to all components on the form.

Component Properties

The Component Properties at the bottom of the left panel displays the properties of the selected component.

It allows you to label, define and/or validate the selected component. Currently there are four types of options that are selectable from the top row:

  • Actions
  • Blocks
  • Inputs
  • Others

Each type may have one or more components. Depends on the selected component, the properties will vary. You can also define and validate the root.

Root

Every form has a root, this is by default. The root presents the blank form itself until components are added onto it.

You can define and validate the form using its properties.

Field Description Default
Id Name of the root that will be displayed in the form structure. “root”
Label Name of the form that will be displayed. None
Label Mode Defines the orientation of the form.
Available options:
- Vertical
- Horizontal
- None
“Vertical”
Validator Defines the ETL chainset to be used to validate the form. None
Before Build Script The script to be executed before any changes are applied to the current form. Empty script dialog box
After Build Script The script to be executed after every change is made to the current form. Empty script dialog box
On Action Script The script to be called when a button is pressed. Empty script dialog box

Refer to Examples on how to create a form that uses script.

Blocks

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

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

Component Description
Column allows you to add a single column onto the form, as well as defining its width.
Columns Creates a placeholder that allows multiple single columns to be added onto the form.
Page Allows you to create multiple-paged form.
Row Allows you to add input or action components in a single row.
Rows Allows you to add input or action components in multiple rows row.
Tab Bar Allows you to create form with multiple tabs along with Tab Panel.
Tab Panel Allows you to create form with multiple tabs along with Tab Bar.

Refer to Blocks for more details on the components and their properties.

Actions

Actions option consists of several components, such as button bar. To display an action component in the form, a block component need to be added onto the form before the action component can be added.

Component Description
Button Bar Allows you to add button bar onto the form.
Render DocX Allows you to add a button bar onto the form to a render DocX report.
Render RML Allows you to add a button bar onto the form to a render RML report.

Refer to Actions for more details on the components and their properties.

Inputs

Inputs includes input field components such as single line text input, multiple line text area, radio button, checkbox, drop down selection, dataset select, etc. To display an input field component in the form, a block need to be added onto the form before the input component can be added.

To add an input component onto the form, simply drag and drop to the desired location in the form structure. To edit the properties, simply select the desired component and the properties of the desired component wil lbe displayed at the lower panel.

Component Description
Checkbox Allows you to add checkbox options onto the form.
Dataset Checkbox Allows you to add dataset selection options as checkboxes onto the form.
Dataset Select Allows you to add dataset selection options onto the form.
Form Select Allows you to link one form onto another form.
Radio Button Allows you to add radio button options onto the form.
Multiple Selection Allows you to place a drop-down selection onto the form.
Text Area Allows you to place a multiple-lined (from 2 to 50) text box onto the form.
Text Input Allows you to place a single-lined input onto the form in several formats.

Refer to Inputs for more details on the components and their properties.

Others

This group consists of components such as HTML, vertical space, workflow, etc.

Component Description
Attachments Allows you to attach files onto the form.
Form Launcher Allows you to launch another form from the current form.
HTML Allows you to add a HTML onto the form. It can be text, web page, logo, etc.
Hidden Allows you to store information in the form which is not visible to the user.
History Allows you to include history information (such as user, timestamp and results) in the form.
IFrame Allows you to embed another HTML document into the form.
Image Allows you to attach an image onto the form.
Vertical Space Allows you to add white space in the form, creating space between components.
Workflow Allows you to add an existing workflow onto the form (will not appear in the form).

Refer to Others for more details on the components and their properties.

Validation

Validation can be performed before a form is submitted to the workflow.

It is performed by ETL steps, in particular those in the Validation category which produce a “validationIssues” array as a result.

The “root” of the form will define the ETL chainset to be used to validate the form. The “Page” input component can then define the ETL chain to validate the input values entered within the page.