Edit a Form Template

This article helps you understand how to edit an existing form template using AppBuilder Designer.

Updated over a week ago

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.


Edit Name

icon - To edit the name of form template.


Switch to New Look

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.


Using Keyboard Shortcuts

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


Adding / Editing Views

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.


Controls and Properties

Use the various available controls and their properties to design the form as needed. The available controls are described below:

Label

Display a label text with styling. To be displayed as 'read only' for the end user.

Calculated Value

Display a label text along-with an option for fetching dynamic values from Asite database if required. To be displayed as 'read only' for the end user.

Hyperlink

Display hyperlinked text with styling. The end user can click on hyperlinked text and open the linked web address/URL in web browser configured on their computer.

Textbox

Allow end user to enter text within a box along-with an option for fetching dynamic values from Asite database if required. Such a text to be entered by end user can be validated to make sure the data received is in a specific format. Textbox control also allows you to show background text as well as a tooltip upon mouse hover, which becomes helpful to guide end users before they start entering their text.

Text-Area

Allow end user to enter text within a text area along-with an option to fetch dynamic values from Asite database if required. Text-Area control also allows you to show background text as well as a tooltip upon mouse hover, which becomes helpful for guiding end users before they start entering their text.

Rich Text-Area

Allow end user to enter rich text within a text area.

Dropdown

Allow end user to select single or multiple values from the dropdown list configured. Dynamic values from Asite database can also be fetched as dropdown list.

Multiselect Dropdown

Allow end user to select multiple values from the dropdown list as well as use the keyword search option to search within dropdown list. Dynamic values from Asite database can also be fetched as dropdown list.

Checkbox

Allow end user to check single or multiple values from the checkbox options configured.

Radio

Allow end user to select one of the values from radio options configured.

Datepicker

Allow end user to select a specific date as well as time if required.

Timepicker

Allow end user to select a specific time as required.

Map

Allow end user to select location from the provided map.

Image

Display an image for the end user to view. You can define specific image height and width as required.

Signature

Allow end user to create their signature on the form.

Attachment

Allow end user to attach an external file on the form.

Button

Allow end user to click on a button to execute some action on click depending on the control properties.

Site Location

Allow end user to select a location from the site locations defined in the project.

Toggle Button

Allow end user to use toggle button to execute some action when toggling the button on or off depending on the control properties.

Line

Display a line as a separator.

Rating

Allow end user to give ratings to specific content or service based on various parameters.

Layout

Display available fields of the form by arranging them in an order. You can also define number of columns and borders for such a layout.

Table

Group available fields in the form as a table. You can also merge or split cells in the table.

Repeating Table

Display available fields in the form as a table with an ability for end users to manually add new rows under them. These rows will be pre populated with form objects as per original table as well as end users will be allowed to enter varying information for each new row added.

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


Setting up API Connection

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.


Undoing / Redoing an Action

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


Applying Multi-Select Properties

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.


Copying and Pasting Objects

1. To copy and paste form objects across the form views, use copy and 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.

2. 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).

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

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.

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.


Removing Controls

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


Setting a Hierarchy between Controls

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.


Code Editor

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


Configure Print Options

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

  • Basic Printing - To configure basic text printing on the form.

  • Advance Printing - To configure printing the forms including its controls as it is, as well as include any visual scripting if applied.


Save Form Template as Draft

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.


Discard Draft

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


Download an existing 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.


Publish Form Template

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.

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


Check: FAQs


Did this answer your question?