Low-code designer > Set up interfaces / System widget settings

System widget settings

Widgets have both individual and system settings. System settings are the same for all the widgets. They are used to configure a widget’s visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc.

common_widget_settings-1

  • Hide. You can either hide the widget from a page or a form, or specify the visibility conditions. To do this, bind a Yes/No switch variable to this field. If the user checks No, the widget will be visible. See use case of this option in the article below.
  • Read only. Configure access to the widget:
    • If you select Yes, the user won’t be able to edit the widget's data. 
    • Select No to allow users to edit the widget's data.
    • The Inherit from parent option is convenient when you combine several widgets. For example, you place the Associated items widget into the Column widget that has the Read only setting. If you select the Inherit from parent option for Associated items, users won't be able to edit the list of items.
  • HTML styles. Here you can specify the CSS styles for the widget. For example, to enter its width.
  • HTML classes. You can create an HTML style using the Code widget and apply it to the current widget. To apply a style, enter its name specified in the script in this field. You can use the same style in several widgets. For example, you can quickly apply one background color to all widgets on a form.

Applying the same background color to several widgets using the HTML classes field

  • On mouse enter handler. Create an event that happens on mouse enter, a pop-up window with a tip, for example. To do this, you need to add a corresponding script. Click the Create button, enter the script name and click Open. The Scripts tab opens. Write the script.
  • On mouse leave handler. Create an event that happens on mouse leave. For example, make it close the tip window we created in the previous step. Add a corresponding script the same way as in the previous step. It is recommended to configure these events together.

Additional options

You can enable additional options for widgets that contain data, such as a tasks list, page header, added information, and so on. This will ensure fast loading and display of the app form or custom page.

  • Load content when the tab is active. The option is used in the Tabs widget. Enable it to load the contents of the tab only when switching to it.
  • Load the contents asynchronously. This option is available for widgets that contain data, such as Columns, My Tasks, Panel with header. Enable it to display the content only after the custom page or app form has fully loaded.

Bind App

You can bind the widget settings fields to context variables. This is convenient if you need to dynamically change widget settings on a page or during a business process. To bind a field:

  1. Click the bind_table-icon icon next to the field name.
  2. Click the <Not defined> link.
  3. Select a context variable from the dropdown list. The list only displays variables with the same data type as the bound field.
  4. Save and publish the widget.

The setting is now defined by the selected context variable.

Use case

Let's say we have the Orders app to handle customers’ requests. For orders without prepayment, it is required to determine the payment schedule. In this case the sales rep fills out a table with the schedule information on a separate tab. The tab can be hidden or displayed depending on whether the sales rep checks the “Prepayment of 100%” box or not.

This can be done with the following settings:

  1. Go to the apps menu and click the Form Settings.
  2. In the window that opens, add the following properties on the Context tab in the Advanced mode: "Payments" of the Table type and "Prepayment of 100%" of the Yes/No switch (Checkbox) type.
  3. Go to the Create tab and click +Create form (if the form has already been created, click Edit form). The interface designer with the creation form will open.
  4. Drag the Tabs widget to the top panel and add the Order and Payment schedule tabs. Add the "Prepayment of 100%" property to the first tab and the "Payments" table to the second one.
  5. Go to the Payment schedule tab’s system settings and bind the Hide field with the “Prepayment of 100%” property.

common_widget_settings-2

  1. Click Save and Publish on the designer top panel.

Now if the sales rep doesn’t check the "Prepayment of 100%" box, the Payment schedule tab appears on the app form. Here, the sales rep can specify the payment details for the current order.

common_widget_settings-3

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