Dynamic display of interface elements on forms and pages is mostly achieved by showing or hiding certain content or widgets based on conditions or user actions. Sometimes a button needs to be displayed either when the user performs certain actions or if the user has the necessary permissions. Sometimes it is the other way around: it may be needed to hide some sections on the form if they are not needed yet or if they are already filled out. You can use dynamic display of data on forms in different ways and for different purposes; the system provides tools to configure settings that would fit any use case.
To manage the visibility of widgets, use the Hide option on theSystem tab in the widget’s settings. It is available for most widgets in the system.
The Hide option is a switch that can have one of five values. These values provide enough functions to cover any needs when you create complex widgets. Let’s see how they work.
These basic options allow you to show or hide a widget at all times, no matter the conditions. The Always show value is selected for all widgets by default.
When you use the Show on condition option, you can link the widget’s visibility settings to a field from the context of the form or page. By default, the field is not selected, and you can see the link in the settings window. When you click it, you can see a list of fields available for linking. If apps are available in the context, you can expand them to select one of their properties (on any nesting level without restrictions).
When you select a field that the widget’s visibility settings will be linked with, its name will be displayed in the widget’s settings. Its value is checked when the widget is rendered on a page or form. Depending on the value, it is shown or hidden. If the value is true or truthy, the widget will be displayed, otherwise, it will be hidden.
Let’s consider a simple example.
We’ll create a context field of the Yes/No switch (Boolean) type with the code showButton:
Let’s add the Button widget to the form and set its visibility settings to Show on condition. We’ll link the widget’s visibility settings to the context field we created:
Let’s also create the Name field and add it to the form.
In the settings of the Field widget, let’s open the Events tab and set an event that will happen when the value of the Name field changes. We’ll add a new function, nameChanged, and move on to editing it by clicking Open.
In this function, we’ll check the current value of the Name string and, depending on its length, change the value of showButton. If the string is longer than five characters, showButton will evaluate to true, otherwise, to false.
You can link a widget’s visibility settings to a context field and change the value of this field using scripts to create complex, sophisticated visibility conditions for any use case.
Let’s see how the visibility settings of the button we configured above will work on a form. Now if the Name field is shorter that five characters, the button will be hidden:
But when the string is six characters long, the condition returns true, and the button appears on the form:
The Hide on condition option works the same way as the previous one, but reversed. The widget is hidden when the linked context field evaluates to true or when it’s truthy, otherwise, it is shown.
For example, let’s create another field of the Yes/No switch type in the context and name it Hide button (hideButton):
Let’s add the field to the form’s template:
In the visibility settings, we’ll select Hide on condition and link the visibility settings with the Hide button field:
Now when the Hide button property evaluates to true, the button is hidden:
To show the content of a form or page only to specific groups of users and hide it for everyone else (for example, as a way to restrict access), use the Show for groups option. When you select this value, a field where you can choose user groups will appear:
To add a user group, start typing its name in the field and select it in the drop-down list or click the magnifying glass icon and select a group in the window that opens:
The list of selected groups will be displayed under the field:
When configuring the context of an app in the Advanced Mode of the form settings, you can enable the Show only when a condition is met option for a property. This allows you to set complex conditions without using a script. You can specify field values at which the property will be displayed and configure links between conditions. For more details, read the Calculated fields article in the ELMA365 Help Center.
When you configure a form in the interface designer and move a property to the modeling canvas, it is placed inside the Field container widget. The display of the field on the form is determined by the visibility option set in the widget settings. By default it is always shown. Conditions from the Show only when a condition is met option are not applied in this case.
You can make it so that the Show only when a condition is met setting takes priority.
To do this, in the Advanced Mode of the form settings, open the Create, View, or Edit tab, depending on the app page you are configuring. Add the property for which you have set display conditions, to the list of form fields.
After this, the Show only when a condition is met option will have priority over the visibility settings in the interface designer.
Note that this method works even if you have removed the Standard item form widget from the modeling canvas.
You can also configure a complex condition using the Show on condition and Hide on condition options, performing checks in a script.
How to set up dynamic display of fields and widgets with a complex condition
Dynamic display of interface elements on forms and pages is mostly achieved by showing or hiding certain content or widgets based on conditions or user actions. Sometimes a button needs to be displayed either when the user performs certain actions or if the user has the necessary permissions. Sometimes it is the other way around: it may be needed to hide some sections on the form if they are not needed yet or if they are already filled out. You can use dynamic display of data on forms in different ways and for different purposes; the system provides tools to configure settings that would fit any use case.
To manage the visibility of widgets, use the Hide option on theSystem tab in the widget’s settings. It is available for most widgets in the system.
The Hide option is a switch that can have one of five values. These values provide enough functions to cover any needs when you create complex widgets. Let’s see how they work.
Always show. Always hide
These basic options allow you to show or hide a widget at all times, no matter the conditions. The Always show value is selected for all widgets by default.
Show on condition
When you use the Show on condition option, you can link the widget’s visibility settings to a field from the context of the form or page. By default, the field is not selected, and you can see the link in the settings window. When you click it, you can see a list of fields available for linking. If apps are available in the context, you can expand them to select one of their properties (on any nesting level without restrictions).
When you select a field that the widget’s visibility settings will be linked with, its name will be displayed in the widget’s settings. Its value is checked when the widget is rendered on a page or form. Depending on the value, it is shown or hidden. If the value is
trueor truthy, the widget will be displayed, otherwise, it will be hidden.Let’s consider a simple example.
We’ll create a context field of the Yes/No switch (Boolean) type with the code
showButton:Let’s add the Button widget to the form and set its visibility settings to Show on condition. We’ll link the widget’s visibility settings to the context field we created:
Let’s also create the Name field and add it to the form.
In the settings of the Field widget, let’s open the Events tab and set an event that will happen when the value of the Name field changes. We’ll add a new function,
nameChanged, and move on to editing it by clicking Open.In this function, we’ll check the current value of the Name string and, depending on its length, change the value of
showButton. If the string is longer than five characters,showButtonwill evaluate totrue, otherwise, tofalse.async function nameChanged(): Promise<void> { Context.data.showButton = Context.data.name && Context.data.name.length > 5 ? true : false; }You can link a widget’s visibility settings to a context field and change the value of this field using scripts to create complex, sophisticated visibility conditions for any use case.
Let’s see how the visibility settings of the button we configured above will work on a form. Now if the Name field is shorter that five characters, the button will be hidden:
But when the string is six characters long, the condition returns
true, and the button appears on the form:Hide on a condition
The Hide on condition option works the same way as the previous one, but reversed. The widget is hidden when the linked context field evaluates to
trueor when it’s truthy, otherwise, it is shown.For example, let’s create another field of the Yes/No switch type in the context and name it Hide button (
hideButton):Let’s add the field to the form’s template:
In the visibility settings, we’ll select Hide on condition and link the visibility settings with the Hide button field:
Now when the Hide button property evaluates to
true, the button is hidden:If the value is
false, the button is shown:Show for groups
To show the content of a form or page only to specific groups of users and hide it for everyone else (for example, as a way to restrict access), use the Show for groups option. When you select this value, a field where you can choose user groups will appear:
To add a user group, start typing its name in the field and select it in the drop-down list or click the magnifying glass icon and select a group in the window that opens:
The list of selected groups will be displayed under the field:
Show only when a condition is met
When configuring the context of an app in the Advanced Mode of the form settings, you can enable the Show only when a condition is met option for a property. This allows you to set complex conditions without using a script. You can specify field values at which the property will be displayed and configure links between conditions. For more details, read the Calculated fields article in the ELMA365 Help Center.
When you configure a form in the interface designer and move a property to the modeling canvas, it is placed inside the Field container widget. The display of the field on the form is determined by the visibility option set in the widget settings. By default it is always shown. Conditions from the Show only when a condition is met option are not applied in this case.
You can make it so that the Show only when a condition is met setting takes priority.
To do this, in the Advanced Mode of the form settings, open the Create, View, or Edit tab, depending on the app page you are configuring. Add the property for which you have set display conditions, to the list of form fields.
After this, the Show only when a condition is met option will have priority over the visibility settings in the interface designer.
Note that this method works even if you have removed the Standard item form widget from the modeling canvas.
You can also configure a complex condition using the Show on condition and Hide on condition options, performing checks in a script.