Low-code designer > Set up interfaces / Context types

Context types

Configuring interfaces and writing scripts requires the use of context variables. Variables determine specific values in widgets, for example, in counters. They are also used to design the layout of fields, show or hide page components, etc.

There are two types of context that have major differences: widget context and app context.

Widget context

Widget context comprises service variables used to configure the widget. They are used in scripts that determine the widget’s behavior. They also allow fetching data from apps, loading files, etc.

To add a widget context variable, go to the Context tab of the interface designer.

CT1

Click +Add and create the variable of the type you require. Read more about the types of variables available in the system in System data types.

Note that you can only use Latin letters to set property names. We also recommend using meaningful names that are easy to understand: for example, Username instead of Var123.

Note that variable settings include the Show only when a condition is met option.

context_02

Enable this option to define when a field needs to be shown to users. If the conditions are not met, it will be hidden. This allows you to set up a widget that adapts to users actions. For example, an additional field may appear only if an employee selects Yes in a Yes/No switch.

The variables created on the Context tab are also displayed on the right-side panel of the designer, on the Properties tab. This tab also features the system widget variables.

context_03

In a custom widget, the context includes additional options for flexible configuration. You can specify the input and output variables or edit the widget settings window. Read more about it in Additional options in the context of custom widgets.

Example of using widget variables

Let’s say you want to add a column with payment instructions to the order form. These instructions have to be shown only if the sales rep selects Full payment as payment type when creating a new order.  

In the interface designer, on the Context tab, create a Yes/No switch variable. This variable allows users to select one of two options. You can customize their names. In our case, lets use Advanced payment and Full payment instead of Yes and No.

context_01

 

Next, go to the Template tab and place the variable on the page so that users are able to select one of the payment options when creating a new order.

Add the the Column widget to the form. In its settings, click the bind_table-icon icon next to the Hide field. Then click the <Not defined> link and select the Payment type variable created earlier. Publish the widget to apply the changes.

Now, when a user selects the Full payment option as payment method, the hidden column with the order processing instructions will appear.

You can use the same variable in a script, for example, with the On mouse enter handler of the Button widget. Read more about it in Scripts in widgets.

App context

App context contains app fields that users fill out and view when they work with app items. For example, fields for the client’s last name, order amount, file, etc.

You can configure app properties in the standard mode or advanced mode and in the interface designer.

In the interface designer, app properties are located on the right-side panel on the Properties tab. You can drag them to the canvas and place in the appropriate order.

CT4

Read more about form properties in Context tab.

To learn more about setting up forms in the interface designer, see Form templates.

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