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:
1. Click here to understand how to add a form and accordingly create a new form.
2. From the 'Manage App Settings' listing page, click the 
icon against the newly created form to change its form settings.
3. Click the 'Edit' button to edit the selected form template. A new browser tab will open with an interface to edit the form template:
4. 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):
[4a] 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.
[4b] Click the 
icon at the top right corner to remove the selected form object.
[4c] 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.
[4d] Click 'Continue' to proceed further.
5. 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.
[5a] Under 'Properties > Basic', change the 'Text' to 'Demo Template'.
[5b] Under 'Properties > Basic', enter the 'Field Name' as 'ORI_FORMTITLE'.
[5c] Under 'Properties > Style', style the text entered as follows:
Make the text bold.
Make the text underlined.
Set the font size to 20.
Make the text centre-aligned.
6. 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.
[6a] Under 'Properties > Basic', change the 'Label' to 'Project Name'.
[6b] Under 'Properties > Basic', enter 'Field Name' as 'Project_Name'.
[6c] 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:
Name | Applicable Field Type | Description |
Form Statuses | Multiple | Returns Form Status ID and Name of all Form Statuses |
Project Distribution Groups | Multiple | Returns ID and names of Project Distribution Groups |
Project Organisations | Multiple | Returns Organisation Name |
Project Users | Multiple | Returns First and Last Name including Organisation Name of Project Users |
Workflow Status | Multiple | Workflow Status |
Workspace Roles | Multiple | Workspace Roles |
Client | Single | Returns Client Organisation Name |
Close Due Date | Single | Returns Close Due Date of the Form |
Current Workflow Status | Single | Current Workflow Status |
Date of Issue | Single | Returns Date of Form Creation |
Form Group Code | Single | Returns Form Group Code |
Form ID | Single | Returns Form Id |
Form Name | Single | Returns Name of the Form Type |
Form Status | Single | Returns Form Latest Status Name |
Form Title | Single | Returns Form Title |
Message Creator | Single | Returns First and Last name including Organisation Name of Form Originator |
Message Date | Single | Returns Form Message Creation Date |
Message ID | Single | Returns Form Message Id |
ORI Attachments | Single | Returns Name of Attachments in Form ORI |
ORI Doc Associations | Single | Returns Doc Ref and Revision Number for Files associated with Form ORI |
Ori Form Associations | Single | Returns Form Group Code, Form ID and Form Title |
Originator | Single | Returns Form Originator Name |
Printed By | Single | Returns First and Last name of 'Printed By' User |
Printed ON | Single | Returns the Date of Printing |
Project Name | Single | Returns Project Name |
User Reference | Single | Returns Form User Reference |
Working User | Single | Returns Working User Name |
Working User Role | Single | Returns Working User Role Name |
7. 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.
[7a] Under 'Properties > Basic', change the 'Label' to 'Enter text here'.
[7b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Textbox_1'.
[7c] Under 'Properties > Basic', tick the 'Required' box to make this textbox mandatory for the end user to fill in.
8. 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.
[8a] Under 'Properties > Basic', change the 'Label' to 'Enter description here'.
[8b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Textarea_1'.
[8c] Under 'Properties > Basic', tick the 'Required' box to make this field mandatory for the end user to fill in.
9. 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.
[9a] Under 'Properties > Basic', change the 'Label' to 'Enter rich text content here'.
[9b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Rich_Textarea_1'.
10. 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.
[10a] Under 'Properties > Basic', change the 'Label' to 'Select the building units this may have an effect on'.
[10b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Dropdown_1'.
[10c] Under 'Properties > Basic', tick the 'Required' box to make this dropdown mandatory for the end user to select from available options.
[10d] Under 'Properties > Basic', tick the 'Multi-Select' box to allow end users to select multiple options from this dropdown.
[10e] Under 'Properties > Data Source', select 'Static Data' and click the 
icon. Enter labels and values as follows:
Label | Value |
Unit One | 1 |
Unit Two | 2 |
Unit Three | 3 |
Unit Four | 4 |
11. 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.
[11a] Under 'Properties > Basic', change the 'Label' to 'Tick the project codes that can be used as reference for this change'.
[11b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Checkbox_1'.
[11c] Under 'Properties > Data Source', enter labels and values as follows:
Label | Value |
Project 1 | 1 |
Project 2 | 2 |
Project 3 | 3 |
Project 4 | 4 |
Project 5 | 5 |
12. 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 any one option from a list of options.
[12a] Under 'Properties > Basic', change the 'Label' to 'Is the change approved by Project Management Consultant?'.
[12b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Radio_1'.
[12c] Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
[12d] Under 'Properties > Data Source', enter labels and values as follows:
Label | Value |
Yes | 1 |
No | 2 |
Set the 'Yes' label as the default.
13. 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.
[13a] Under 'Properties > Basic', change the 'Label' to 'Date'.
[13b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Datepicker_1'.
[13c] Under 'Properties > Basic', select a 'Display Format' like 'mm-dd-yyyy'.
[13d] Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
14. 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.
[14a] Under 'Properties > Basic', change the 'Label' to 'Pick the Project location from Map'.
[14b] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Map_1'.
15. 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.
[15a] Under 'Properties > Basic', enter 'Field Name' as 'Display_Logo_Here'.
[15b] 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'.
[15c] Under 'Properties > Style', make the image centre-aligned.
16. 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'.
[16a] Under 'Properties > Basic', enter both 'Field Name' and 'Data Field Name' as 'Signature_1'.
[16b] Under 'Properties > Basic', tick the 'Required' box to make this form object mandatory for the end user to fill in.
17. 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.
[17a] Under 'Properties > Basic', enter 'Field Name' as 'Layout_1'.
[17b] Under 'Properties > Basic', change the 'Columns' value to '3'.
[17c] 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.
[17d] 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.
[17e] 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.
18. 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.
[18a] Under 'Properties > Basic', enter 'Field Name' as 'Table_1'.
[18b] Under 'Properties > Basic', change the 'Columns' value to '1'.
[18c] Drag and drop the form object with the name 'Date' (date picker) to the first column of this table.
[18d] Drag and drop the form object with the name 'Pick the Project Location from Map' (map) to the second column of this table.
[18e] Drag and drop the form object with the name 'Signature' (signature) to the third column of this table.
19. 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.
[19a] Under 'Properties > Basic', enter 'Field Name' as 'RepeatingTable_1'.
[19b] Under 'Properties > Basic', change the 'Columns' value to '2'.
[19c] Drag and drop the form object with the name 'Enter text here' (textbox) to the first column of this repeating table.
[19d] Drag and drop the form object with the name 'Enter description here' (textarea) to the second column of this repeating table.
20. Rearrange form objects to make the form look user-friendly.
[20a] Drag and drop the form object with the company logo (image) to the topmost position.
[20b] Drag and drop the repeating table consisting of 'Enter text here' (textbox) and 'Enter description here' (textarea) as per below:
Below the form object with the name 'Project Name' (calculated value).
Above the form object with the name 'Enter rich text content here' (rich textarea).
21. 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.
22. After publishing the form template, click 'Save' on the form settings screen to apply the changes made.
23. You must assign form permissions for the newly added form so that end users can start using it.
24. 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