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:
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.
Save Your Work!
We recommend that you make a habit of saving your work in the Form Editor at regular intervals.
Fixed Cell Width and Height
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.
Place Sections First
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 | |
| GPS Coordinates | |
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 |
User Field Types
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.
Standard Fields are Not Editable
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.
Labels Have Been Added
Standard Field Types
| Type | Info | |
|---|---|---|
| Project Elements | Project | 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. |
| Document Elements | Date Changed | This will show the Date the form was last Changed |
Date Due | The Date Due (if applicable) will by default be always be visible in the header 'Details' of your form, although if you wish to display this in another location on your form as well, you can use the Date Due document element. | |
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. Forms with Multiple Open Statuses 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 | The Date Issued will by default be always be visible in the header 'Details' of your form, although if you wish to display this in another location on your form as well, you can use the Reference Number document element. | |
Document Code | This will display the Document Code, for example 'DEF' for a Defect form, or 'ITP' for an ITP. | |
Reference Number | The Reference Number will by default always be visible in the header 'Details' of your form, although if you wish to display this in another location on your form as well, you can use the Reference Number document element. | |
Status | The Status will by default always be visible in the header 'Details' of your form, although if you wish to display this in another location on your form as well, you can use the Status document element. | |
Title | The Title will by default always be visible in the header 'Details' of your form, although if you wish to display this in another location on your form as well, you can use the Title document element. | |
| Addressing Elements | Attention Company Name | This will display the Attention Company Name. That is the company of whoever is the Action person on the form at the time of viewing. |
Attention Company ID | This will display the Attention Company ID. That is the company of whoever is the Action person on the form at the time of viewing. | |
Attention ID | This will display the ID of the user the form is currently for Action to at the time of viewing. | |
Author Company ID | This will display the Company ID of the user who Authored the form. This will not change once first set. | |
Author Company Name | This will display the Company Name of the user who Authored the form. This will not change once first set. | |
Author Display Name | The Author Display Name will always be visible in the header of your form, although if you wish to display this in another location on your form as well, you can use the Author Display Name document element. This will not change once first set. | |
Author First Name | This will display the First Name of the user who Authored the form. This will not change once first set. | |
Author Last Name | This will display the Last Name of the user who Authored the form. This will not change once first set. | |
Author ID | This will display the ID of the user who Authored the form. This will not change once first set. | |
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.
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.