With form templates you can flexibly configure custom forms: change the layout, add new buttons and widgets, use scripts. This allows you to set up:
- forms for creating, viewing, and editing app items;
- task and start event forms in a business process. To add a new template, go to the tab of the form that you want to set up and click <Default>.
Set up a template in Interface Designer
Templates are created in the Interface Designer. To open the designer:
- First, open the template settings:
- for an app item form, click on the gear icon next the app's name in the workspace menu. Select Form settings. Then switch to the advanced mode and open a tab that corresponds to the form you wish to set up: Create, View, Edit.
- for a process task or start event form, double click on the element on the process diagram and go the Form tab.
- Click on the Default link. The Create form button will appear; click on it to open the low-code designer. To edit an already existing template, click Edit form on the desired tab.
Low-code designer tabs
The low-code designer where forms are configured has several tabs: Template, Context, Scripts, History, and Files.
- Template. Here you can configure your form: edit the header, change the layout of elements, add new buttons, widgets, and properties. You can make the form dynamic. In this case the fields will be hidden or shown to the users depending on the data they enter. You can learn more in Dynamic forms.
- Context. Here you can add properties that will be used in the template and scripts. To add a new property, click +Add and specify its parameters.
- Scripts. Here you can write a script to determine the widget's behavior, for example, to display a pop-up when the user hovers the mouse over a certain area of the form or page. You can learn more in Scripts in widgets and in ELMA365 TS SDK.
- History. This tab displays all the published versions of the app or task form. You can view the time, author, and comment left upon publication, as well as restore one of the old versions. To do that, select the version in the list and click Apply version, then confirm your action. The current draft will be replaced. The changes that you have saved but haven't yet published will be lost. To make this restored version available to users, publish it. When working with a task form template, you need to publish the business process that the task belongs to.
- Files. Here you can add libraries and custom functions in Javascript to use them in your scripts.
You can learn more about each tab in Interface designer.
Add a widget to the template
A widget is an interface element with particular functionality for such activities as uploading a file, displaying instructions, activity streams, user lists, etc. Widgets help create user-friendly forms. They allow you to design the layout of fields, add buttons, and set up interface behavior for user interactions.
To add a widget to your form, go to the Template tab and drag the widget from the right panel to the modeling canvas.
To add a widget to the template's side panel, you can either drag and drop it or click + Widget.
The widget' settings will open. You can read more about the configuration of each widget in Widget types.
When working with widgets you can use the Undo and Redo buttons available in the top toolbar.
The Undo button cancels you last action such as adding, moving, deleting a widget or changing its settings. The Redo button repeats the canceled action.
If you are configuring a complex interface with a large number of widgets, you can use navigation to find the required item fast.
Every template has a default sidebar. To hide it, click on an empty space on the canvas: the Modal window label will appear in the top tight corner. Click on the gear icon on the label and disable the Show sidebar option in the settings. Save the changes. The sidebar will no longer be displayed.
You can also bind the sidebar's visibility to a context variable. It will then be shown or hidden depending on the variable's value. You can read more about it in System widget settings.
Add a property to the form
You can fill a template with app or process properties, system properties of widgets, as well as variables added on the Context tab. To add a property to the canvas, go to the Properties panel on the right-hand side of the Template tab. Then drag a property to the main canvas or the side panel. When dragged to the canvas, properties are placed into a container called Field. A Field can be placed inside other elements.
Hide property name
In order to make the form more lightweight, you can hide the names of the properties leaving just the fields.
To do that:
- Select the Field that contains the property that you have added to the form; click on the gear icon.
- In the window that opens, deselect the Show name on form box.
- Click Save.
Now the name of the field will not be displayed on the form, just the field itself. Please note that this option is only available for the properties that you dragged from the Properties panel and placed in the Field container.
Check and apply a template
The top toolbar has controls for working with a completed template:
Check. You can check the widgets for errors;
Debug. This control is available only for app form templates. It allows you to check what the form will look like in the interface. You can learn more in Debugging an interface;
Settings. This button is only available on the Scripts tab and enables global constants in scripts.
To apply the template that you have configured, click Save in the top toolbar. For app forms, additionally click Publish so that widgets become available to users. When publishing, you can leave a comment about the changes that you have made.
Each published version is shown on the History tab of the interface designer. Here you can see brief information about each version and restore one of the versions. Read more in Interface designer.
Reuse a template
You can reuse a template multiple times. For example, a template configured for the view form can be used for the edit form as well. To reuse a template simply select it in the drop-down list.
After that, such elements as widgets, buttons, and headers added to the view form will be displayed on the edit form as well.
However, if the lists of fields on the View and Edit tabs are different, the fields on the forms will also differ even if the same template is used.
If you want to use the same set of fields, go to the template settings and delete the Standard form widget since it is the one that displays the fields from the View and Edit tabs.
Instead, drag the necessary fields from the Properties tab.
With such settings, both the View and Edit forms will feature the same set of fields.
In a similar way you can reuse a process task template in other tasks of the process.
Found a typo? Highlight the text, press ctrl + enter and notify us