The Form Designer tool has recently been made available with the aim to provide users with the ability to design and customise forms based on their own processes.
Project Administrators will have access 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)
Contents:
| Table of Contents | ||
|---|---|---|
|
Extra Guides for Building Modern Forms
- Basic Form Building Video Tutorial
- Building a Complex Form
- Complex Form Building Video Tutorial
- Building List Tables
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.
If you make a mistake while building, you are able to 'Undo' using the button along the bottom left of the page.
| Tip | ||
|---|---|---|
| ||
| Don't forget to press 'Save' before you exit! We recommend that you make a habit of saving your work in the Form Editor at regular intervals. |
| 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. |
Field Types
You can choose to include a range of types of information on your form.
These 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.
- Standalone:
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. - Linked:
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.
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 and support all field types.
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 Lists.
| 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.
User Fields
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.
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).
Number
Displays Numbers
Currency
Displays numbers with Currency formatting
Date
Displays a Date input User Field
Select
Displays as a Drop-Down selection, options must be configured for the user field
Radio
Displays as Radio Button/s, options must be configured for the user field
CheckBox
Displays as Checkbox/s, options must be configured for the user field
Contact
Displays a Contact input User Field
Displays as a Multi-Level Drop-Down selection, options must be configured for the user field
For linking other documents within iTWO cx
Attachment List
For attaching external documents
Cumulative
Insert a Signature which has been uploaded to iTWO cx
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
| 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. |
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
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.
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.
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 | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
Layout of the Form Editor. |
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
Explore the range of elements and field types you can use on a form. |
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
Borders, font, colours all the fun things to make your form look great. |
| Panel | |||||||
|---|---|---|---|---|---|---|---|
| |||||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
What is a list table, how to create one and how to format it. |