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 or click +Widget. Read more in Form templates.
Widget settings
Configure the widget in the opened window on the Main, Events, and System tabs.
Main tab
- 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, they will be displayed regardless of the setting of this option.
- 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 or widget’s context.
Events tab
- On tab change handler. This option allows you to add an event that needs to happen when a user switches tabs.
- On mouse enter handler. You can create an event that happens when a user hovers over the widget;
- On mouse leave handler. You can create an event that happens when the mouse pointer leaves the widget.
System tab
System settings are similar for all widgets. They allow you to set the widget visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. To learn more about these settings, see System widget settings.
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. To make the form available to users, click Save and then Publish on the interface designer toolbar.
Add a tab
To create a tab in the widget:
- Click the + icon.
- In the opened window, specify a title. You can also specify system settings for the new tab.
- For each tab, add content that will be displayed if the user clicks on its title.
The created tabs can be rearranged, deleted, and their settings can be edited.
Example
In this case, the Tabs widget is used to divide the employee procedures into three categories.
