search string side menu

How to set up dynamic display of fields and widgets with complex conditions

The main way to create dynamic behavior in form and page interfaces is by showing or hiding specific content and widgets based on conditions or user actions. For example, a button may need to appear only after certain actions or calculations are completed, or when a user has the necessary permissions. Conversely, some form sections might need to stay hidden until they're needed or filled out. There are many ways to use dynamic behavior in forms, and the system provides tools to make it possible.

To control widget visibility, use the Visibility setting found in almost any widget's settings under the System tab.

You can choose from the following visibility options:

Additionally, for fields from the app context added to the form, you can apply the Display when a condition is met setting. Let’s look at these options in more detail.

Always show. Always hide

These basic options allow you to always show or always hide a widget, regardless of any conditions. By default, all widgets are set to Always show.

Show on condition

When selecting the Show on condition option, you can bind a field from the form or page context to the visibility setting. Click to select a field for binding. If there is a field of the App type in the context, you can expand it and use its properties without nesting limitations.

After selecting the field, its name appears in the settings. The field's value is checked when the page or form is rendered to determine whether the widget should be shown. If the field’s value is true or can be interpreted as true, the widget will be shown; otherwise, it will be hidden.

Consider the following example.

You can make a transition button appear only after the user enters a name of a certain length.

To do this, create a Yes/No Switch field (boolean) in the context with the code showButton.

Add the Button widget to the form nd set its visibility to Show on condition. Bind its display to the field you just created.

Also, add a Name field to the form.

In the settings of the Field widget that contains the name field, go to the Events tab and set an event for when the value changes. Create a new function, for example nameChanged and click Open to edit it.

In the function, you’ll check the current name string and change the showButton field value based on its length. If the name is longer than five characters, showButtonis set to true; otherwise to false:

async function nameChanged(): Promise<void> {
    Context.data.showButton = Context.data.name && Context.data.name.length > 5 ? true : false;
}

Using a visibility binding to the Yes/No Switch field and modifying its value with a script lets you create complex multi-condition logic for showing widgets.

Now, in the configured form, the button will stay hidden while the Name field contains five or fewer characters.

Once the input reaches six characters, the visibility condition returns true, and the button appears.

Hide on condition

The Hide on condition option works the same way as the previous one but with reversed logic. The widget is hidden when the linked context field istrue, or interpreted as true, and shown when it’s false.

For example, create a Yes/No Switch field in the context and name it Hide button(hideButton).

Place it on the form.

In the button's visibility settings, select Hide on condition and bind it to the Hide button field.

Now, when the Hide button field is true, the button is hidden.

If the field value isfalse, the button is shown.

Show for groups

To display form or page content only for specific user groups—for example, to apply permission-based visibility—use the Show for groups option. When selected, a field appears for choosing user groups.

To select a group, start typing its name in the input field and choose from the dropdown list, or click the magnifying glass icon and choose a group in the popup window..

The list of selected groups is displayed under the input field.

Show only when a condition is met

When you add a field from the app context to a form, it is placed inside a Field widget. Its display is controlled by one of the following setting:

  • Show only when a condition is met option, configured in the app form settings. This allows you to set complex visibility conditions without scripts. Read more in the official documentation.
  • The visibility option chosen in the Field widget settings: Always show, Show on condition, etc.

Let’s look at how these settings are prioritized:

  1. If you use Always show, Always hide or Show for groups, you can control which setting takes priority. To do this, go to the app’s form settings. Depending on the form type (Create, View, or Edit), open the relevant tab. You can:
  • Add the field to the property list; this makes the Show only when a condition is met setting take priority, and widget visibility settings will not apply.
  • Remove the field from the property list; the widget’s visibility setting takes priority, and the Show only when a condition is met setting will not work.

Note: removing the Standard item form widget from the form does not affect setting priority.

  1. If you use Show on condition or Hide on condition, the widget visibility setting always takes priority. The Show only when a condition is met setting has no effect on whether the field is shown.