Skip to content

Tabs#

tabsWidget

Overview#

The Tabs widget allows a way to easily navigate and present widgets, as well as saving space. An example is show below, where a Tabs widget is used to navigate between an Entity Attachment widget and an Entity Details widget and an Entity History widget, set for the same Material.

tabsWidgetExample

Smart Barcode Scanning

This widget supports Smart Barcodes.

General Steps#

To use the Tabs widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Tabs from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

tabsGeneral

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    tabsStyle

  2. In the Setup tab, provide the following properties:

    • Show Tabs - Determine whether to display the tabs. This option is set to true by default.
    • Enable Automatic Tab Rotation - Determine whether the widget should automatically cycle through the different tabs. This option is set to false by default.
    • Rotation Interval - If Enable Automatic Tab Rotation is set to true, specify the interval for the tab rotation.

    Screenshot showing a widget customization settings page with an input field labeled "Rotation Interval" when automatic tab rotation is enabled.

  3. In the Tabs section, define the number of tabs and configure their properties:

    • Default - Set this toggle button to false if you want to customize the behavior of the Disabled or Visible toggle buttons. Note that only one tab can be set as Default per widget.
    • Disabled - Specify whether the tab should be disabled. A disabled tab will not be accessible to users.
    • Visible - Determine whether the tab should be visible. If set to false, the tab will be hidden from the user interface.

    You can add as many tabs as needed and configure each tab's properties to suit your requirements.

    Screenshot showing a customizable tab interface with multiple tabs.

  4. Optionally, define the Links between this widget and other elements of the UI Page.

    Screenshot showing Wadget settings with links to unknown details and a new unsaved page.

  5. By saving and closing the settings, the widget will be changed accordingly.