All Collections
Asite AppBuilder
Design a Form Template
Design a Form Template

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

Updated this week

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 an 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'.

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


Next Article: Manage Form Settings


Did this answer your question?