The Form Editor tool has been created with the aim to provide users with the ability to design and customise forms based on their own processes.
For projects with Form Editor access enabled, Project Administrators will be able to use the Form Editor.
Accessing the Form Editor
The form editor can be accessed by Project Administrators in the Document Configuration
Configuration → Document Types → Document →
At a Glance
The Form Editor screen has 3 main sections, from Left to Right:
- Field Types (User Fields, Labels, Lists, Document Details, Sections)
- Form Area (Default 12 x 10 cell grid)
- Cell Properties (When cell is clicked)
Page Contents:
| Table of Contents | ||
|---|---|---|
|
Extra Guides for Building Modern Forms
Editing the Form Area
The Form Area displays in the middle frame of the page, consisting of a grid with a default of 12 Columns and 10 rows.
To place a field on the form, simply drag from the panel on the left of the screen and drop into the desired position on the form editor's grid.
You can then choose to expand the field to cover additional cells (below and to the right) as needed, and the Cell Properties panel will show on the right of the screen.
| Note | ||
|---|---|---|
| ||
The Width and Height of each cell is fixed, with the width and heights being adjusted by expanding a field to cover additional cells below or beside. The default of 12 Columns cannot be adjusted, however the number of rows can easily be added or subtracted to suit. Within List Tables, you may have as many or few columns as required. Spacer Rows can be used to create space between rows, rather than adjusting row heights. |
If you make a mistake while building, you are able to 'Undo' using the button along the bottom left of the page.
You may reset the entire layout to the original blank grid state by pressing 'Reset' at the bottom left of the page.
To exit the Form Editor page, press 'Cancel' at the bottom right.
| Tip | ||
|---|---|---|
| ||
We recommend that you make a habit of saving your work in the Form Editor at regular intervals. Don't forget to press 'Save' before you exit! |
Field Types
You can choose to include a range of types of information on your form.
These field type options can all be found in the panel which appears on the left of the screen in Form Editor. You may also choose to expand the panel to make viewing and navigating the options easier.
Form Elements
These can be seen as the building blocks and fillers for your form, allowing you to separate information into Sections, break up user fields using Spacer Rows, compile user fields into Lists and use Labels to show the descriptions of user fields or place free text.
More detail about each of these elements further below.
Label
Can be used as as standalone cell type, or linked to a User Field.
A Label can be used to insert a heading, static text, etc. Simply drag and drop the label into the Form Area and expand to fill the desired number of cells.
To link a Label to a User Field, simply place the Label on your form and drag the User Field on top of the Label cell. This will link the two fields together, and your User Field will still remain in the original cell position if it had already been placed on your form.
If you place the Label and then drag the User Field on top before placing the User Field on the grid, it will simply link to the Label cell however the User Field will return to the side panel, waiting to be placed on the form.
A benefit of linking the user field with the label is that when user field descriptions are updated in the configuration section, the labels on the form will also be updated.
You can tell that a Label is linked to a UserField as it will display the Linked icon next to the field name:
Snapshots of this element in the Form Editor and Form View below.
List
Lists can be used to store information in a List Table within the form.
You may choose the number of columns and what user field data will be input into each of the columns.
When using the form, rows can be added or removed for the number of relevant inputs. For bulk entry, users are able to download an excel template to fill the required data, then simply copy and paste into the List to populate rows.
Lists are able to contain User Fields only.
For more information about List Tables, please click here.
Section
When building a form, you may now choose to contain sets of related user fields within a Section. For example, you may choose to contain 'Location Details' and 'Issue Details' in separate sections.
From the configuration perspective, Sections will make it easier to edit security and viewing rights to a group of user fields.
From the users perspective, a collapse feature has been added so that sections of information which have already been entered and no longer require visibility can be folded down to save screen space and reduce the need for long scrolling documents.
See below Sections in use on a form. The 'Weather' and 'Visitors' sections have been collapsed, with the 'Deliveries', 'Plant' and 'Labour' sections remaining expanded. (In the below example, the Sections contain List Tables.)
| Tip | ||
|---|---|---|
| ||
Sections may contain any form element type, and rows can easily be added and removed as required. However, once placed on the grid a Section will be unable to be relocated, and deleting the Section will also clear any data placed within these cells. It is best to start with a plan and place the Sections on your form at the beginning. |
Spacer Row
Used to create a space shorter than a standard row to make a gap in rows of information, as seen on the form in below example.
When placing a Spacer Row, drag from the panel on the left onto your form grid. The Row will be placed above the highlighted row on the grid.
Data cannot be entered in a Spacer Row.
User Fields
As with the other elements, User Fields can simply be dragged from the Left Panel and placed on the grid as desired.
Create
In this section, you can choose to Create a new User Field directly within the Form Editor.
To create a new user field, switch to 'Create' to view all of the user field types available for you to add to your form.
Link Existing
You may also choose to Link Existing User fields. Switching to this tab will show you any existing User Fields for this Document Type.
For forms which may have multiple same/ similarly named fields, hovering over the field in the left panel will display the User Field Code and Full Description to make placing the correct user field easier.
'Edit Details'
Within the Form Editor, you also have the option to 'Edit Details' for each of the User Fields.
This is a quick way to access the user field configuration to update details such as description, options, height, display format, etc. from right within the editor.
User Field Types
Type
Info
Text
Defaults to Plain Text
For Rich Text, in the user field settings set the width to 100% and the height to 2 (or above).
For Text Wrapping, the height will also need to be above 1
Best display width depends on expected data input
Number
Displays Numbers
Best display width depends on expected data input, typically fits 1 cell
Currency
Displays numbers with Currency formatting
Best display width depends on expected data input, typically fits 1 cell
Date
Displays a Date input User Field
Displays best when width: 2+ cells
Select
Displays as a Drop-Down selection, options must be configured for the user field
Displays best when width: 2-3 cells, depending on length of option names
Radio
Displays as Radio Button/s, options must be configured for the user field
If Multiple Options:
Displays best when width: 2+ cells
CheckBox
Displays as Checkbox/s, options must be configured for the user field
If Singular Option:
Typically fits 1 cell width
If Multiple Options:
Displays best when width: 2+ cells
Contact
Displays a Contact input User Field.
Displays best when width: 3 cells
Displays as a Multi-Level Drop-Down selection, options must be configured for the user field
Displays best when width: 2-3 cells, depending on length of option names
GPS Coordinates
Displays best when width: 2+ cells
For linking other documents within iTWO cx
Displays best when width: 2+ cells
Attachment List
For attaching external documents (not stored within iTWO cx)
Displays best when width: 2+ cells
Cumulative
Insert a Signature which has been uploaded to iTWO cx
Displays best when width: 3 cells
Perform a calculation on a user field/s on the form, with the result to be displayed in the Calculation User Field cell on the document
Typically fits 1 cell width
| Info | ||
|---|---|---|
| ||
For additional detail about configuring the different types of User Fields, click here. |
Standard Fields
Along with the Form Elements and User Fields, there are also some Standard Fields available to use when building your form.
| Info | ||
|---|---|---|
| ||
| Standard Fields are not editable by the user, and instead are auto-populated based on the range of data types available. |
Details about each of the elements available for use on your forms can be found in the table to the right.
Below is an example of each of the standard fields on a form.
| Note | ||
|---|---|---|
| ||
For the above example, Labels have been placed to the left of each of the Standard Fields stating their names. When placing a Standard field, it will not come with an accompanying Label/ Description field. You will need to place these on the form yourself, if you wish. |
Standard Field Types
While the project number will always be visible in the header of your form, in some instances you may choose to show the Project (Code) in another location within your form as well. In these cases, you can use the Project element.
Date Changed
Date Due
Date First Closed
This will show the date the form was first moved to a closed status.
Date First Opened
This will show the date the document was first opened.
| Note | ||
|---|---|---|
| ||
| For forms with custom workflows, there may be multiple open statuses. This form element will populate with the date of the first instance the form moved to any open status. Be mindful of this if reporting using this field on forms with multiple open statuses. |
Date Issued
Document Code
Reference Number
Status
Title
Addressing Elements
Attention Company Name
Attention Company ID
Attention ID
Author Company ID
Author Company Name
Author Display Name
Author First Name
Author Last Name
Author ID
Cell Properties
Properties for a cell will appear in the right side panel when the cell is placed or clicked.
Description
Custom Classes
Ignore. For RIB Staff use.
Border Styles
Style
Border Style options available: Solid, Dashed, Dotted
Click to apply to selected cell. Note that the border will be applied to all 4 sides of the cell.
Width
Border Width. Expressed in pixels. Selections from 1px - 5px available for use.
Click to apply to selected cell. Note that the border will be applied to all 4 sides of the cell.
Colour
Clicking the dropdown will open a Colour Picker.
You can either choose your colour using this, or enter a hex reference at the top of the colour picker. To clear a selected colour, click on the drop icon in the top right of the colour picker panel.
Click to apply to selected cell. Note that the border will be applied to all 4 sides of the cell.
Text Styles
Preset styles which can be used on your form.
These include default styles for Main Headings, Sub Headings and standard Text in black, blue and grey.Select from the dropdown to apply to the current selected cell.
Pre-Set Text Style Properties
12px
Proper
Text Properties
Emphasis
Click to apply to the current selected cell.
Options Available: Bold, Italic, Underline, UPPERCASE
Font Size
Click to apply to current selected cell.
Expressed in Pixels, default 12px.
Alignment
Click to apply to current selected cell.
Horizontal Alignment (Left, Centre, Right)
Vertical Alignment (Top, Centre, Bottom)
Text Wrap
Click to apply to current selected cell.
Colour
Click to apply to current selected cell.
Can be applied to Text or Background of the cell.
You can either choose your colour using this, or enter a hex reference at the top of the colour picker.
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
Form Editor Overview
|
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
Form Elements and Field Types
|
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
Cell Properties
|
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
List Tables
|