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 on 
icon against the newly created form to change its form settings.
3. Click on '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 on 
icon at left side.
As seen in the above screenshot, an form object named 'Title' will show configured by default as a mandatory field.
Below are the steps to remove the 'Title' form object (so as to start creating the form template from scratch):
[4a] Click on the form object 'Title' to change properties of selected textbox control. The properties panel will be visible on right side.
As seen in the screenshot, the 'Field Name' for the default form object is showing 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 on 
icon showing at 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 center 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 Asite database on the form. For 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 on 
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'. This will help fetch the project's name directly from Asite database when the end user is creating the form.
Below is a list of available Asite data sources at present. Same can also be accessed by clicking on 
icon available at top right of '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 Organization Name |
Project Users | Multiple | Returns First and Last Name including Organization Name of Project Users |
Workflow Status | Multiple | Workflow Status |
Workspace Roles | Multiple | Workspace Roles |
Client | Single | Returns Client Organization 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 Organization 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 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 textarea 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 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 select multiple options from this dropdown.
[10e] Under 'Properties > Data Source', select 'Static Data' and click on 
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 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 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 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 select a date from 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 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 pick a location from 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 center 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 response 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 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. For 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 'Columns' value to '3'.
[17c] Drag and drop the form object with the name 'Select the building units this may have an effect on' (dropdown) to 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 second column in the layout.
[17e] Drag and drop the form object with the name 'Tick the project codes that can be used as reference for this change' (checkbox) to 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. For 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 'Columns' value to '1'.
[18c] Drag and drop the form object with the name 'Date' (datepicker) to first column of this table.
[18d] Drag and drop the form object with the name 'Pick the Project Location from Map' (map) to second column of this table.
[18e] Drag and drop the form object with the name 'Signature' (signature) to 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 an 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 'Columns' value to '2'.
[19c] Drag and drop the form object with the name 'Enter text here' (textbox) to first column of this repeating table.
[19d] Drag and drop the form object with the name 'Enter description here' (textarea) to second column of this repeating table.
20. Rearrange form objects to make the form look user-friendly.
[20a] Drag and drop form object with the company logo (image) to 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 on 'Publish' option available at top right to publish the changes to form template. This will close the browser tab and you will be redirected back to relevant form settings screen.
22. After publishing the form template, click 'Save' on form settings screen to apply the changes made.
23. It is required to 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 concerned form group and form type while creating forms.
Related Articles: Add a Form Template, Edit a Form Template
Next Article: Define Calculations