Low-Code Designer > Setting 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.

widget-system-settings-1

  • Hide. You can either hide the widget from a page or a form, or specify the visibility conditions. To do this, bind the 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. This is the accessibility setting.
    • If you select Yes, the user won’t be able to edit the widget data. 
    • Select No to allow users to edit the widget data.
    • Inherit from parent option is convenient when you combine several widgets. For example, you place the app items list widget into the Column widget that has the Read only setting. If you select the Inherit from parent option in the app element list widget setting, the users will not be able to edit the list.
  • HTML styles. Here you can specify the CSS styles for the widget. For example, enter its width. 
  • 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 Order app to handle the customers’ requests. For orders without prepayment, it is required to indicate the terms of payment for the goods. The sales rep fills in this information on a separate tab. We can make it visible depending on whether the manager filled the “Prepayment of 100%” field or not. To do this:

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

widget-system-settings-2

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

Now, when the sales rep enables the No option in the "Prepayment of 100%" field, the new Payment terms tab appears on the app form. Here, the sales rep can specify the payment details for the current order.

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