Low-code designer > Set up interfaces / Context types

Context types

When configuring interfaces and writing scripts, you need to use context variables. Variables determine specific values for widgets, for example, in counters. They are also used to design the layout of fields, and show or hide page components, such as pop-up menus.

There are two types of context that you need to distinguish: Widget context and App context.

Widget context

Widget context comprises of variables used for configuration of widgets and pages. They work as service variables in scripts that define widget behavior. They can fetch information from apps, show/hide a widget, upload files, etc.

To add a widget context variables, go to the Context tab of the Interface designer.

CT1

Click +Add and create the variable of the required type. Read more about types of variables in Data types.

Note that you can only use Latin symbols as the Property name of variables. Also, we recommend using meaningful names that are easy to understand: for example, Username instead of Var123.

Important: variable setting have the Show only when a condition is met option.

context_02

Enable it to define conditions in which this field will be shown to users. In all the other cases it will be hidden. This way you can set up a widget that adapts to actions of users. For example, an additional field appears only if an employee switches the Yes/No switch to Yes.

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

context_03

Example of using variables in widgets

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

In interface designer, on the Context tab, create a Yes/No switch variable. This variable allows users to select one of the two options. You can customize the names of the options. In our case, let's 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 in the Hide field. Then click the <Not defined> link and select the Payment type variable created earlier.

Add instructions into the column. Publish 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 On mouse enter handler of the Button widget. In that case, the column will appear when the user hovers the mouse over the button.

Additional options in the context of custom widgets

When creating a custom widget, you can enable the Input and Output options for the widget's variables. Later, when you place this widget on a form or a page, these options will allow you to:

  • manage the visibility of widget's variables in the context of a page or a form;
  • pass the widget's context to the context of a page or form.

For this option to work correctly, you need to map the widget's context variables to the properties of the form or page where the widget is located.

To enable the Input and Output options, open the widget in interface designer. Go to the Context tab and check the options for each variable.

context_04

  • Input. This variable will record and store the value of a property from the form or page where the widget is located;
  • Output. The value of this property will be passed to the property of the form or page;
  • Both are enabled. In this case, when the value of the widget's variable changes, the value of the form/page property also changes, and vice versa;
  • Both are disabled. In this case, the value of the widget's variable is not passed to the form/page context. You will not need to map the variable with fields on the form/page, its value is set up in the widget's settings when created.

Example of configuring additional options

To see how these options work in real life, take a look at the following example. Let's create a Calculator widget:

  1. Go to Administration > Interfaces, click +Create, select Widget, enter its name and save the settings.
  2. The interface designer opens. Click +Widget and drag the Panel with header to the modeling canvas.
  3. Go to the Context tab and add properties of the Number type: "Addend 1", "Addend 2", "Sum".
  4. Set up additional settings for the added properties:
  • for "Addend 1" and "Addend 2" enable the Input option;
  • for "Sum" enable the Output option.
  1. Now go back to the Template tab. On the right-hand sidebar, switch to Properties and drag the added properties to the canvas. Place them inside the Panel with header widget .
  2. Now add a script that will calculate the sum of the "Addend 1" and "Addend 2" fields. To do that, select the "Addend 1" field click on the gear icon next to its name to open the settings. Go to the Events tab and click Create in the On value change handler. Enter a name and click Create and Open. On the Scripts tab that opens add:

async function calc (): Promise<void> {
    debugger;
    Context.data.sum = Context.data.addend_1 !== undefined && Context.data.addend_2 !== undefined ? Context.data.addend_1 + Context.data.addend_2 : undefined;
    }

Do the same for "Addend 2".

  1. Save and publish the widget. Now you can add this custom Calculator widget to pages and forms of an app.

Let's say you have the Orders app where sales reps can add several orders for one client. To calculate the total of these orders, place the Calculator widget on the form. In Settings, map the widget's variables to app fields: from "Amount of order N1" we will pass the value to "Addend 1", and from "Amount of order N2" we will pass the value to "Addend 2". The "Sum" variable is mapped to "Total".

If the Input option is enabled to the "Addend 1" and "Addend 2" variables, the values of the mapped fields will be sent to the widget. The script will calculate the sum. Since we enabled the Output option for the "Sum" field, its value will then be passed to the "Total" field.

context_06

App context

App context contains app properties for configuring forms. Properties are fields you use to enter names, specify order total, upload a file, etc.

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

The app properties are located on the Properties tab, on the right sidebar of the interface designer. You can drag them to the field and place in the appropriate order.

CT4

Read more about form properties in Context tab.

Read more about the interface designer in form template configuration in Form templates.

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