Versions Compared

Old Version 50

changes.mady.by.user Former user

Saved on

compared with

New Version Current

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


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 →

Image Removed

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)

Image Removed

Page Contents: 

Table of Contents
minLevel2

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
titleFixed 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. 

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
titleSave Your Work!

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. 

Image Removed

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: 
    Image Removed

    Snapshots of this element in the Form Editor and Form View below. 

    Image Removed

    Image Removed

    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. 

    Image Removed

    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.)

    Image Removed

    Tip
    titlePlace 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. 

    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. 

    Image Removed

    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. 

    Image Removed

    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. 

    Image Removed

    '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

    Cascading

    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

    Coordinate

    GPS Coordinates 

    Displays best when width: 2+ cells

    Document List 

    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

    Bidder List 

    Budget Link

    Cumulative

    Signature

    Insert a Signature which has been uploaded to iTWO cx

    Displays best when width: 3 cells

    Calculation 

    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
    titleUser 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. 

    Info
    titleStandard Fields are Not Editable
    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.

    Image Removed

    Note
    titleLabels Have Been Added

    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

    TypeInfoProject ElementsProject

    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. 

    Note
    titleForms 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 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. 

      Image Removed

    Pre-Set Text Style Properties
    StyleFont Size Case Font Colour Background Colour EmphasisProper Case - Grey Font

    12px

    Proper

    #666666#ffffff (nil)nilProper Case - Blue Font 12pxProper#0067b1#ffffff (nil)nilProper Case - Black Font 12pxProper#000000#ffffff (nil)nilUPPER CASE - GREY FONT 12pxUPPER#666666#ffffff (nil)nilUPPER CASE - BLUE FONT 12pxUPPER#0067b1#ffffff (nil)nilUPPER CASE - BLACK FONT 12pxUPPER#000000#ffffff (nil)nilMain Heading - Blue Font - Proper Case 14pxProper#0067b1#f1f1f1UnderlineMAIN HEADING - BLUE FONT - UPPER CASE14pxUPPER#0067b1#f1f1f1UnderlineMain Heading - Grey Font - Proper Case 14pxProper#666666#f1f1f1UnderlineMAIN HEADING - GREY FONT - UPPER CASE 14pxUPPER#666666#f1f1f1UnderlineMain Heading - Black Font - Proper Case 14pxProper#000000#f1f1f1UnderlineMAIN HEADING - BLACK FONT - UPPER CASE14pxUPPER#000000#f1f1f1UnderlineSub Heading - Blue Font 14pxProper#0067b1#f1f1f1nilSUB HEADING - BLUE FONT - UPPER CASE 14pxUPPER#0067b1#f1f1f1nilSub Heading - Grey Font14pxProper#666666#f1f1f1nilSUB HEADING - GREY FONT - UPPER CASE 14pxUPPER#666666#f1f1f1nil

    Text Properties

    Emphasis

    • Click to apply to the current selected cell. 

      Options Available: Bold, Italic, Underline, UPPERCASE 

      Image Removed

    Font Size

    • Click to apply to current selected cell.

      Expressed in Pixels, default 12px. 

      Image Removed

    Alignment

    • Click to apply to current selected cell. 
      Horizontal Alignment (Left, Centre, Right) 
      Vertical Alignment (Top, Centre, Bottom)

      Image Removed

    Text Wrap

    • Click to apply to current selected cell. 

      Image Removed

    Colour

    Click to apply to current selected cell.

    Can be applied to Text or Background of the cell. 

    Image Removed

    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. 
    Panel
    borderColor#bbbbbb

    Image AddedForm Editor Overview

    Panel
    borderColor#BBBBBB
    bgColor#DEEBFF

    Layout of the Form Editor.

    Click Here >




    Panel
    borderColor#bbbbbb

    Image AddedForm Elements and Field Types

    Panel
    borderColor#BBBBBB
    bgColor#DEEBFF

    Explore the range of elements and field types you can use on a form.

    Click Here >




    Panel
    borderColor#bbbbbb

    Image AddedCell Properties

    Panel
    borderColor#BBBBBB
    bgColor#DEEBFF

    Borders, font, colours all the fun things to make your form look great.

    Click Here >




    Panel
    borderColor#bbbbbb

    Image AddedList Tables

    Panel
    borderColor#BBBBBB
    bgColor#DEEBFF

    What is a list table, how to create one and how to format it.

    Click Here >