search string side menu

Low-code designer > Custom forms / Form templates

Form templates

With form templates you can flexibly configure custom forms: change the layout, add new buttons and widgets, and use scripts. This allows you to set up:

 

Set up a template in interface designer

Templates are created in the interface designer. To open the designer:

  1. First, open the template settings:
  • For an app item form, click on the gear icon next the app 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, or Edit.
  • For a process task, start event form, or approval and information task form, double click on the element on the process diagram and go the Form tab.

  1. Click the Default link. The Create form button appears; click on it to open the low-code designer. If you are configuring an app form, a window opens for you to edit the default name of the form if necessary.form-template-1
  2. To edit an already existing template, click Edit form on the desired tab.

You can also access the created template by selecting Interfaces from the workspace or app menu, or in Administration > Interfaces. Then click the name of the form.

Designer tabs

The low-code designer where forms are configured has several tabs: Template, Context, Scripts, History, Settings, and Files.

  • Template. Here you can configure your form: edit the header, change the layout of elements, and 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 ELMA365 TS SDK.
  • History. This tab displays all the published versions of a configured app, task, or start event 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.
  • Settings. Here you can
    • Disable display of the widget with validation errors in case of incorrect filling of fields on the form.
    • Allow placing a custom widget on the top or sidebar.
    • Specify script functions that you want to apply when a widget is initialized, when conditions for its display are checked, or when the form is validated. The default functions for displaying a widget are onInit and canRender but you can replace them with other functions.
    • Allow global constants and widgets from system workspaces to be used in scripts.
  • 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 Designer tabs.

Add a widget to the form

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. You ca place a widget:

  • In the main part of the form. Drag the widget from the right panel onto the form template.

page-widget9

form_tmplt_7

form_tempaltes_01

 

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

page-widget11

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.

Hide the side panel from the template

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.

page-widget12

You can also bind the sidebar visibility to a context variable. It will then be shown or hidden depending on the variable 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.

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:

  • names of properties, leaving just the fields;
  • empty fields that are read-only.

To do that:

  1. Select the Field that contains the property that you have added to the form. Then click on the gear icon.

page-widget7

  1. In the window that opens:
  • deselect the Show name on form box if you want to display the field without a label;
  • select the Hide if the field is empty box if you want to hide an empty field marked as Read Only.

form_tmplt_6

  1. Click Save.

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 customized 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;

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.

template-widget13

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 Create 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 on both the Create and Edit forms, edit the template. Click Edit form and delete the Standard form widget since it is the one that displays the fields from the Create and Edit tabs.

FT12

Then open the Properties tab and add the fields that you need to the canvas. With such settings, both the Create 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.

By creating one template for several app forms you can use a script to set different conditions for displaying widgets on these forms.

360013448740.html 360029574371.html

Found a typo? Highlight the text, press ctrl + enter and notify us