Certified Asite AppBuilder designers can edit existing form templates created using Asite AppBuilder within the project. Click on any of the topics below to access their detailed help:

All existing HTML AppBuilder forms will be available as a record on the 'Manage App Settings' listing page. Click on the icon corresponding to the concerned form to edit relevant form settings. A popup screen will appear.

At this stage, there is a separate 'Edit' button to edit the form template for all such forms created using the 'Add App' option.

Click on the edit button. A new browser tab will open with an interface to edit the selected HTML form design template.

The form template can be edited to design the form how you want.

Click the icon on the left side to show the left panel. Once open, click the icon to hide the left panel as needed.

Similarly, click the icon on the right side to show the right panel. Once open, click the icon to hide the right panel as needed.

icon - To edit the name of the form template.

You can click here to learn how the new AppBuilder looks different and how to apply the new look to existing form templates on your project.

By default, the 'Create View' is available.

Click the 'Views' dropdown in the left panel to edit the view. If no 'Created View' is defined within the form template, all fields in 'Create View' will be displayed as 'Read Only'.

Click on the icon to add new views.

Select a view to add it to your form. Else, type a name for an additional view that you would like to add to your form (with no spaces or symbols in the name):
​

Once done, click 'OK' to continue.

Use the various available controls and their properties to start designing the form. The available controls are described below:

Click on the property names below for a description of the applicable properties in each AppBuilder control:

Select multiple controls from your form design and configure common properties between them.

Select the required controls and click on the icon at the top right of your form designer. A layered page will appear.

To understand the different properties available while selecting multiple controls, click on the related property type below:

Select the styling or properties to apply and click 'OK' at the bottom right.

Configure the data connection and pull information from other Asite forms (which may be part of the same or different projects accessible to you) or external APIs. Click here for detailed help.

The code editor contains blocks to build programs for selected form elements. It contains all the pieces needed for defining and rendering blocks in a drag-and-drop editor. Each block can be configured to include a bit of code that a user can easily snap together like puzzle pieces.

From the Form Designer, click on the icon to open the code editor.

Just like you can define logical validations/conditions on a specific event of a particular form element as explained in event properties, this code editor enables you to define logical validations/conditions on the form design as a whole by adding common functions or creating custom functions that can be applied to any element in that particular form. An example is provided under 'event properties' to help you understand how to use the code editor. You can also learn more about the code editor from the Blockly website: https://developers.google.com/blockly (Blockly is a third-party service integrated into the Asite platform).

​Click here to view AppBuilder Sample Scripts.

Click here to learn how to use keyboard shortcuts to complete tasks using the Asite AppBuilder tool.

To copy and paste form objects across the form views, use the copy and paste dropdown options at the top right corner and choose what you wish to copy.

Clicking on the dropdown, there are two options:

Copy Selected - To copy the objects (including form fields or layout) currently selected in form view.

Copy All - To copy all objects within the selected form view.

Go to the view you wish to paste those fields to, by clicking on the drop-down on the

top left corner and select the view (This will only show you a list of the created views).

Paste the fields using the icon at the top right corner and choose how you would like to paste the fields.

Note: Paste options will only be available once any objects are copied.

Clicking on the dropdown, there are three options:

Paste - Paste the copied objects as new objects in an editable format. Counts of associated items from the source view when copying objects if any, will also be considered when they are pasted.

Paste as Read-only - Paste the copied objects as read-only. This means you won't be able to change the label, field name, data source, etc. for such copied objects.

For 'View Associations' control, the copied object will only be pasted as read-only.

Paste as Calculated Value - Paste the copied object as a new calculated value control.

Copied fields will get pasted just below the field you have selected at the time of pasting.

To undo an action, click the icon at the top right.

To redo an action, click the icon at the top right.

To remove a single control from the form view, click on the icon available at the top right under that particular control.

To remove multiple controls from the form view, you can select them one by one by keeping the shift key pressed, then use the remove dropdown options available at the top right of the form view to remove chosen controls as required.

Clicking on the remove dropdown option, there are two options:

Remove Selected - Remove all selected controls from the form view.

Remove All - Remove all controls from the form view irrespective of selected controls, except the default field with the field name 'ORI_FORMTITLE'.

Click on the icon at the top right to set the hierarchy between values of separate controls of dropdown and checkbox type.

Suppose that 'a_Project Code' is a dropdown field with 'Project 1' and 'Project 2' as its options while 'b_Building Code' is a checkbox field with 'Unit A', 'Unit B', 'Unit C' and 'Unit D' as its options.

If the hierarchy is set as shown in the above screenshot, the actual form will display options as follows:

Click the dropdown option to configure print options on the selected form template.

Available options are:

Click on the option to save the changes as a draft. Please note that any changes made within the form template will only be applied after the updated form template is published.

Note - If the form view was changed before saving the form template as a draft, the previously selected form view will be saved as a draft automatically.

Click on the icon at the top right to discard any existing draft of the form template.

Once the form template is saved, click on the icon at the top right to download the updated form template as a .zip file.

Once the form template is downloaded in zip format, you can upload the zip files to Asite through the form settings screen of the respective form. It is required to select the form template type as 'HTML AppBuilder' while uploading such .zip files on the form settings screen.

Click on the icon at the top right to publish the changes to the form template. This will close the browser tab and redirect you to the related form settings screen.

If you don't want to publish the changes saved to the form template, click on the icon at the top right to close the AppBuilder and return to the form settings screen anytime.

Once back on the form settings screen, click 'Save' to apply any changes to the form template.