Form
The Form tab consists of two panels. The left panel displays the hierarchy, the items 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 item in the form. It has three parts; the top row, form structure in the middle and item properties at the bottom.
Top Row
The top row consists of a selection for the type of items 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 items. |
| Cut | Cuts the selected item and adds onto clipboard. Not available for root. |
| Copy | Copies the selected item and adds onto clipboard. Not available for root. |
| Paste | Pastes the item from the clipboard onto the form. |
| Delete | Deletes the selected item from the form. Not available for root. |
| Download Form | Downloads the form. |
| Run Form | Runs the form in another tab. |
Note that if the item 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.
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 items can be added onto it.
The list of available items 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 items for the form, such as Button Bar. |
| Blocks | List the block items that can be added onto the form, such as columns, rows, etc. |
| Inputs | List of input items that can be added onto the form, such as checkbox, radio button, etc. |
| Others | List of miscellaneous items that can be added onto the form, such as workflow state, HTML, etc. |
To add an item onto the form, first select the “Type of Options” in the top row. The available items will be displayed in the Form Structure section. Simply drag and drop the desired item 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 items 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 items 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 item is renamed (i.e., first text input name is renamed to “TextBox”), then the second text input item will be named “text-input1” instead. This numbering method applies to all items on the form.
Item Properties
The Item Properties at the bottom of the left panel displays the properties of the selected item.
It allows you to label, define and/or validate the selected item. 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 items. Depends on the selected item, 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 items are added onto it.
You can define and validate the form using its properties.
| Item | 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 items such as column(s), page and row(s). 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.
| Item | 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 items in a single row. |
| Rows | Allows you to add input or action items in multiple rows row. |
Refer to Blocks for more details on the items and their properties.
Actions
Currently there is only one item, which is the Button Bar. To display an action item in the form, a block item need to be added onto the form before the action item can be added.
| Item | 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 items and their properties.
Inputs
Inputs includes input field items such as single line text input, multiple line text area, radio button, checkbox, drop down selection, dataset select, etc. To display an action item in the form, a block need to be added onto the form before the input item can be added.
To add an input item onto the form, simply drag and drop to the desired location in the form structure. To edit the properties, simply select the desired item and the properties of the desired item wil lbe displayed at the lower panel.
| Item | 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. |
| 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 items and their properties.
Others
This group consists of items such as HTML, vertical space, workflow, etc.
| Item | Description |
|---|---|
| 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. |
| Vertical Space | Allows you to add white space in the form, creating space between items. |
| 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 items 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 item can then define the ETL chain to validate the input values entered within the page.