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.
- 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.
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: |
CheckBox | Displays as Checkbox/s, options must be configured for the user field If Singular Option: If Multiple Options: |
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
| 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.
| ||||||
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 defaultalways 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.
Pre-Set Text Style Properties
| Style | Font Size | Case | Font Colour | Background Colour | Emphasis |
|---|---|---|---|---|---|
| Proper Case - Grey Font | 12px | Proper | #666666 | #ffffff (nil) | nil |
| Proper Case - Blue Font | 12px | Proper | #0067b1 | #ffffff (nil) | nil |
| Proper Case - Black Font | 12px | Proper | #000000 | #ffffff (nil) | nil |
| UPPER CASE - GREY FONT | 12px | UPPER | #666666 | #ffffff (nil) | nil |
| UPPER CASE - BLUE FONT | 12px | UPPER | #0067b1 | #ffffff (nil) | nil |
| UPPER CASE - BLACK FONT | 12px | UPPER | #000000 | #ffffff (nil) | nil |
| Main Heading - Blue Font - Proper Case | 14px | Proper | #0067b1 | #f1f1f1 | Underline |
| MAIN HEADING - BLUE FONT - UPPER CASE | 14px | UPPER | #0067b1 | #f1f1f1 | Underline |
| Main Heading - Grey Font - Proper Case | 14px | Proper | #666666 | #f1f1f1 | Underline |
| MAIN HEADING - GREY FONT - UPPER CASE | 14px | UPPER | #666666 | #f1f1f1 | Underline |
| Main Heading - Black Font - Proper Case | 14px | Proper | #000000 | #f1f1f1 | Underline |
| MAIN HEADING - BLACK FONT - UPPER CASE | 14px | UPPER | #000000 | #f1f1f1 | Underline |
| Sub Heading - Blue Font | 14px | Proper | #0067b1 | #f1f1f1 | nil |
| SUB HEADING - BLUE FONT - UPPER CASE | 14px | UPPER | #0067b1 | #f1f1f1 | nil |
| Sub Heading - Grey Font | 14px | Proper | #666666 | #f1f1f1 | nil |
| SUB HEADING - GREY FONT - UPPER CASE | 14px | UPPER | #666666 | #f1f1f1 | nil |
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.
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.