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

All existing HTML AppBuilder forms will be available as a separate record in the 'Manage App Settings' listing page. Click on 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 'Add App' option.

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

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

Click on or icons to show / hide the left and right panels.

icon - To edit the name of form template.

Click here to understand how is the new AppBuilder look different and how you can apply the new look to existing form templates on your project.

By default, the 'Create View' is loaded.

Click on 'Views dropdown in the left panel to edit the view as per your needs. In case there is no 'Created View' defined within the form template, all fields in 'Create View' will be displayed as 'Read Only'.

Click on icon to add new views.

Choose one of the 4 standard views available to add it to your form. Else type a name for an additional view that you would like to add it 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 design the form as needed. The available controls are described below:

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

To select multiple controls from your form design and configure a set of common properties between them.

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

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

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

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

The code editor contains blocks to build programs for selected form element. The code editor 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 icon to open 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. Refer to the example provided under event properties to understand how to use 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 on our platform).

​Click here to view AppBuilder Sample Scripts

Click here to understand how to use different keyboard shortcuts for performing different tasks quickly while using Asite AppBuilder tool.

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

Clicking on dropdown, there are two options:

Copy Selected - To copy the objects (including form fields or layout) that are 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 selecting the view (This will only show you a list of the created views).

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

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

Clicking on dropdown , there are three options:

Paste - To 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 - To paste the copied objects as read only. This means that 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 - To paste the copied object as a new calculated value control.

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

To undo or redo actions performed, use and icons available at the top right.

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

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

Clicking on remove dropdown option, there are two options:

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

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

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

Suppose that 'Project Code' is a dropdown field with 'Project 1' and 'Project 2' as its options while '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 above screenshot, the actual form will display options as follows:

the checkboxes for 'Unit A' and 'Unit B' will appear upon selection of 'Project 1' in dropdown.

the checkboxes for 'Unit C' and 'Unit D' will appear upon selection of 'Project 2' in dropdown.

Click on dropdown option to configure print options on the form template being designed. Available options are:

Click on option to save the changes as a draft once done with editing the form template. Please note here that any such changes made within form template will only get applied after the updated form template is published.

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

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

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

Once the form template is downloaded in zip format, you can then upload such zip files to Asite through the form settings screen of 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 icon available at top right to publish the changes to form template. This will close the browser tab and you will be redirected to the concerned form settings screen.

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

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