Low-code designer > Set up interfaces > Widget types > Element layout / Tabs

Tabs

By using Tabs, you can group associated data and divide a form into logical segments.

To place the widget on a form, drag it from the right panel of the interface designer to the canvas. Alternatively, click +Widget and select it. Read more in Form templates. Configure the widget in the pop-up window.

Main tab

tabs 1

  • Hide single-page tabs. Check this box if you want to hide single-page tabs. You can enable this setting in two ways: by checking the box or by clicking on the link icon on the right of the field and selecting a Yes/No switch variable from the app’s or widget’s context. The value of the variable determines the tab’s visibility. If the widget has two or more tabs, the option will have no effect on it.
  • Arrange horizontally. You can change the tabs’ layout to vertical instead of horizontal. You can do this in two ways: by checking the box or by clicking on the link icon on the right of the field and selecting the Yes/No switch variable from the app’s or widget’s context.

Events tab

tabs 2

  • On tab change handler. This option allows you to add an event that needs to happen when a user switches tabs.

System tab

System settings are similar for all widgets. They allow you to set the widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. Read more about these settings in the System widget settings article.

When you add several tabs, you can change their order. To do that, click on a tab and drag it to a different place within the widget.

To finish configuring the widget, click Save and then Publish on the interface designer toolbar.

Example

In this case, the Tabs widget is used to divide the employee procedures into three categories.

T2

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