Asite Help Centre

Design a Form Template

This article helps you understand how to design an form template using Asite Form Designer.

Updated over a week ago

Certified Asite AppBuilder designers can design custom form templates within their projects.

Below are the steps to create a sample form template using Asite AppBuilder:

Click here to understand how to add a form and accordingly create a new form.
From the 'Manage App Settings' listing page, click the icon against the newly created form to change its form settings.
Click the 'Edit' button to edit the selected form template. A new browser tab will open with an interface to edit the form template:
By default, the 'Create View' will load. To view the tools panel, click the icon on the left side.
As in the screenshot above, a form object named 'Title' will be configured as a mandatory field by default.
Below are the steps to remove the 'Title' form object (to start creating the form template from scratch):
1. Click the form object 'Title' to change the properties of the selected textbox control. The properties panel will be visible on the right side.
  The 'Field Name' for the default form object appears as ORI_FORMTITLE.
  Please note that the 'Create View' in any form template must have 'ORI_FORMTITLE' as one of the field names. It helps in defining the form title.
2. Click the icon at the top right corner to remove the selected form object.
3. A message will appear at the top stating 'You are trying to remove field which is set as 'Form Title'. Form Title is a mandatory field.' along with a 'Continue' button.
4. Click 'Continue' to proceed further.
Drag and drop a Label control from the left panel. Select this form object to change its properties.
A 'Label' control is useful to display the form's title.
1. Under 'Properties > Basic', change the 'Text' to 'Demo Template'.
2. Under 'Properties > Basic', enter the 'Field Name' as 'ORI_FORMTITLE'.
3. Under 'Properties > Style', style the text entered as follows:
  1. Make the text bold.
  2. Make the text underlined.
  3. Set the font size to 20.
  4. Make the text centre-aligned.
Drag and drop a Calculated Value control from the left panel. Select this form object to change its properties.
A 'Calculated Value' control is useful to display calculated, i.e. variable values fetched from the Asite database on the form. E.g. form title, form name, originator name, project name, etc.
1. Under 'Properties > Basic', change the 'Label' to 'Project Name'.
2. Under 'Properties > Basic', enter 'Field Name' as 'Project_Name'.
3. Under 'Properties > Basic', click the icon corresponding to the 'Value' property, which will open a popup with a textbox allowing you to select available data source values.
  Put the mouse cursor in the textbox and type the initial characters of the field name, like 'Pro'. 'Project Name' will appear as one of the options. Select the same and click 'OK' to continue. This will help fetch the project's name directly from the Asite database when the end user is creating the form.
  Below is a list of Asite data sources at present. The same can also be accessed by clicking the icon available at the top right of the 'Value' popup:
  1. Form Statuses
    Applicable Field Type: Multiple
    Description: Returns Form Status ID and Name of all Form Statuses
  2. Project Distribution Groups
    Applicable Field Type: Multiple
    Description: Returns ID and names of Project Distribution Groups
  3. Project Organisations
    Applicable Field Type: Multiple
    Description: Returns Organisation Name
  4. Project Users
    Applicable Field Type: Multiple
    Description: Returns First and Last Name, including the Organisation Name of Project Users
  5. Workflow Status
    Applicable Field Type: Multiple
    Description: Workflow Status
  6. Workspace Roles
    Applicable Field Type: Multiple
    Description: Workspace Roles
  7. Client
    Applicable Field Type: Single
    Description: Returns Client Organisation Name
  8. Close Due Date
    Applicable Field Type: Single
    Description: Returns the Close Due Date of the Form
  9. Current Workflow Status
    Applicable Field Type: Single
    Description: Current Workflow Status
  10. Date of Issue
    Applicable Field Type: Single
    Description: Returns Date of Form Creation
  11. Form Group Code
    Applicable Field Type: Single
    Description: Returns Form Group Code
  12. Form ID
    Applicable Field Type: Single
    Description: Returns Form ID
  13. Form Name
    Applicable Field Type: Single
    Description: Returns the Name of the Form Type
  14. Form Status
    Applicable Field Type: Single
    Description: Returns Form Latest Status Name
  15. Form Title
    Applicable Field Type: Single
    Description: Returns Form Title
  16. Message Creator
    Applicable Field Type: Single
    Description: Returns the First and Last name, including the Organisation Name of the Form Originator
  17. Message Date
    Applicable Field Type: Single
    Description: Returns Form Message Creation Date
  18. Message ID
    Applicable Field Type: Single
    Description: Returns Form Message ID
  19. ORI Attachments
    Applicable Field Type: Single
    Description: Returns the Name of Attachments in Form ORI
  20. ORI Doc Associations
    Applicable Field Type: Single
    Description: Returns Doc Ref and Revision Number for Files associated with Form ORI
  21. Ori Form Associations
    Applicable Field Type: Single
    Description: Returns Form Group Code, Form ID and Form Title
  22. Originator
    Applicable Field Type: Single
    Description: Returns Form Originator Name
  23. Printed By
    Applicable Field Type: Single
    Description: Returns the First and Last name of the 'Printed By' User
  24. Printed ON
    Applicable Field Type: Single
    Description: Returns the Date of Printing
  25. Project Name
    Applicable Field Type: Single
    Description: Returns Project Name
  26. User Reference
    Applicable Field Type: Single
    Description: Returns Form User Reference
  27. Working User
    Applicable Field Type: Single
    Description: Returns Working User Name
  28. Working User Role
    Applicable Field Type: Single
    Description: Returns the Working User Role Name
Drag and drop a Textbox control from the left panel. Select this form object to change its properties.
A 'Textbox' control is useful to get short text input from the end users.
1. Under 'Properties > Basic', change the 'Label' to 'Enter text here'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Textbox_1'.
3. Under 'Properties > Basic', tick the 'Required' box to make this textbox mandatory for the end user to fill in.
Drag and drop a Text-Area control from the left panel. Select this form object to change its properties.
A 'Text-Area' control is useful to get long text input from the end users.
1. Under 'Properties > Basic', change the 'Label' to 'Enter description here'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Textarea_1'.
3. Under 'Properties > Basic', tick the 'Required' box to make this field mandatory for the end user to fill in.
Drag and drop a Rich Text-Area control from the left panel. Select this form object to change its properties.
A 'Rich Text-Area' control is useful to get rich text input from the end users.
1. Under 'Properties > Basic', change the 'Label' to 'Enter rich text content here'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Rich_Textarea_1'.
Drag and drop a Dropdown control from the left panel. Select this form object to change its properties.
A 'Dropdown' control is useful to get the end users to scroll through and select from a list of options.
1. Under 'Properties > Basic', change the 'Label' to 'Select the building units this may have an effect on'.
2. Under 'Properties > Basic', enter 'Field Name' and 'Data Field Name' as 'Dropdown_1'.
3. Under 'Properties > Basic', tick the 'Required' box to make this dropdown mandatory for the end user to select from available options.
4. Under 'Properties > Basic', tick the 'Multi-Select' box to allow end users to select multiple options from this dropdown.
5. Under 'Properties > Data Source', select 'Static Data' and click the icon. Enter labels and values as follows:
  1. Label: Unit One | Value: 1
  2. Label: Unit Two | Value: 2
  3. Label: Unit Three | Value: 3
  4. Label: Unit Four | Value: 4
Drag and drop a Checkbox control from the left panel. Select this form object to change its properties.
A 'Checkbox' control is useful to get the end users to select from a list of options with clear visibility of all the options.
1. Under 'Properties > Basic', change the 'Label' to 'Tick the project codes that can be used as reference for this change'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Checkbox_1'.
3. Under 'Properties > Data Source', enter labels and values as follows:
  1. Label: Project 1 | Value: 1
  2. Label: Project 2 | Value: 2
  3. Label: Project 3 | Value: 3
  4. Label: Project 4 | Value: 4
  5. Label: Project 5 | Value: 5
Drag and drop a Radio control from the left panel. Select this form object to change its properties.
A 'Radio' control is useful to get the end users to select one option from a list of options.
1. Under 'Properties > Basic', change the 'Label' to 'Is the change approved by Project Management Consultant?'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Radio_1'.
3. Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
4. Under 'Properties > Data Source', enter labels and values as follows:
  1. Label: Yes | Value: 1
  2. Label: No | Value: 2
  Set the 'Yes' label as the default.
Drag and drop a Datepicker control from the left panel. Select this form object to change its properties.
A 'Datepicker' control is useful to get the end users to select a date from the calendar.
1. Under 'Properties > Basic', change the 'Label' to 'Date'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Datepicker_1'.
3. Under 'Properties > Basic', select a 'Display Format' like 'mm-dd-yyyy'.
4. Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
Drag and drop a Map control from the left panel. Select this form object to change its properties.
A 'Map' control is useful to get the end users to pick a location from a given map.
1. Under 'Properties > Basic', change the 'Label' to 'Pick the Project location from Map'.
2. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Map_1'.
Drag and drop an Image control from the left panel. Select this form object to change its properties.
An 'Image' control is useful to display images on the form, like a company logo.
1. Under 'Properties > Basic', enter 'Field Name' as 'Display_Logo_Here'.
2. Under 'Properties > Basic', enter 'Url' as 'https://www.asite.com/hs-fs/hubfs/resources/images/logo.png?t=1527056021668&width=171&height=40&name=logo.png'.
3. Under 'Properties > Style', make the image centre-aligned.
Drag and drop a Signature control from the left panel. Select this form object to change its properties.
A 'Signature' control is useful to authorise responses on forms like 'Request for Information'.
1. Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Signature_1'.
2. Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
Drag and drop a Layout control from the left panel. Select this form object to change its properties.
A 'Layout' control is useful to arrange selected form objects in an order. E.g. arranging all the checkboxes in a checklist form.
1. Under 'Properties > Basic', enter 'Field Name' as 'Layout_1'.
2. Under 'Properties > Basic', change the 'Columns' value to '3'.
3. Drag and drop the form object with the name 'Select the building units this may affect on' (dropdown) to the first column in the layout.
4. Drag and drop the form object with the name 'Is the change approved by Project Management Consultant?' (radio) to the second column in the layout.
5. Drag and drop the form object with the name 'Tick the project codes that can be used as a reference for this change' (checkbox) to the third column in the layout.
Drag and drop a Table control from the left panel. Select this form object to change its properties.
A 'Table' control is useful to group selected form objects in a table format. E.g. all form objects relating to a particular topic can be grouped in one table.
1. Under 'Properties > Basic', enter 'Field Name' as 'Table_1'.
2. Under 'Properties > Basic', change the 'Columns' value to '1'.
3. Drag and drop the form object with the name 'Date' (date picker) to the first column of this table.
4. Drag and drop the form object with the name 'Pick the Project Location from Map' (map) to the second column of this table.
5. Drag and drop the form object with the name 'Signature' (signature) to the third column of this table.
Drag and drop a Repeating Table control from the left panel. Select this form object to change its properties.
A 'Repeating Table' control is useful to arrange selected form objects in a table format, as well as giving the end user the ability to insert new rows under them. These new rows will be pre-populated with the same form objects as in the initial row, allowing end users to enter varying information under each row.
For example, in a 'Purchase Order' form, an end user may need to add new items. The repeating table control can allow them to add new items as well as enter varying details for each item, like product name, quantity, unit price, total price, etc.
1. Under 'Properties > Basic', enter 'Field Name' as 'RepeatingTable_1'.
2. Under 'Properties > Basic', change the 'Columns' value to '2'.
3. Drag and drop the form object with the name 'Enter text here' (textbox) to the first column of this repeating table.
4. Drag and drop the form object with the name 'Enter description here' (textarea) to the second column of this repeating table.
Rearrange the form objects to make the form look user-friendly.
1. Drag and drop the form object with the company logo (image) to the topmost position.
2. Drag and drop the repeating table consisting of 'Enter text here' (textbox) and 'Enter description here' (textarea) as per below:
  1. Below the form object with the name 'Project Name' (calculated value).
  2. Above the form object with the name 'Enter rich text content here' (rich textarea).
Click the 'Publish' option at the top right to publish the changes to the form template. This will close the browser tab, and you will be redirected back to the relevant form settings screen.
After publishing the form template, click 'Save' on the form settings screen to apply the changes made.
You must assign form permissions for the newly added form so that end users can start using it.
The 'Create' view, designed using AppBuilder, will load under the concerned form group and form type while creating forms.

Related Articles: Add a Form Template, Edit a Form Template

Next Article: Define Calculations