Low-code designer > Custom forms > Form templates / Dynamic forms

Dynamic forms

The layout of a task form or app item can change depending on the data that the user enters into the system in the process of work. This allows not to overload forms with fields and buttons. They are shown only when they are necessary. Forms that adjust to the user in this way are called dynamic forms.

How it works

Suppose a company sells office furniture. They keep track of all the client orders using a special app. Each order has its own page in the system that displays such information as Description, Quantity, Price, and Total.

DF1

If the total order amount is more than 250 USD, the company gives customers a discount. As soon as the sales rep specifies the Total amount of more than 250 USD, an additional Discount field will automatically appear on the page. The sales rep will write down the discount, and ELMA365 will calculate the total discounted amount.

DF2

Set up a dynamic form

Dynamic forms are configured using the Code widget. You can use this widget both on task forms and app item forms.

The widget is added to the task form in the form editor. You can read more about how to set up a custom task form, add and configure widgets in the following articles: Form Templates and Interface Designer.

The widget is added to the app item form in the advanced mode. In this mode, you can configure the layout of the page and create a custom template with widgets. Please note, that only the creation and editing forms can be made dynamic since these are the forms used for the data input.

In the Code widget, you can write a script which will implement the necessary logic. To do so, we recommend that you read the following articles:

начало внимание

Using Global or Namespace constants in scripts restricts the export of system components. Read more about it in the Global constants in scripts article.

конец внимание

Filters on a dynamic form

Filtering associated app fields makes it easier for the user to work with the form when filling it out. Let's say an employee fills out a contract form and  indicates a contact person from the Contacts app. To prevent an employee from looking for the right representative in a long list of contacts, you can set a filter in the form settings. For example, show only those contacts that have the Active box checked or only those who were initially added to the system by the current user.

This will reduce the list of app items available for selection.

Filtering is configured in a few steps:

  1. Add a new property of the App type to the contract form and select the Contacts app.
  2. In its settings, check the Restrict choice box, and then click Configure conditions.df3
  3. In the window that opens, click on the +Filter button. Then click on the Not defined link and select from the list of fields the one by which the Contacts will be filtered. So, select the Author field, and then check the Current user box next to it. Thus, in the list of contacts available for selection, the user will see only those created by him or her.
  4. Add additional filters as needed, for example, filtering by address.

df4

Click Save. Now, when filling out a new contract form, in the Contact field, the user will be able to indicate a contact person who they added to the system and whose address contains the city of London.

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