Managing Tabs

Overview

Tabs are managed on templates by selecting the Configure Tabs option in the action menu to open the Tab Management dialog.

In the dialog you will see the following options:

  1. Delete tabs: Click on the trash can icon to delete a tab. Default tabs cannot be deleted.
  2. Reorder tabs: Click the reorder icon and drag tabs to reorder.
  3. Expand tabs to rename, set a visibility expression, or set the Enabled Platforms
  4. Add tabs: Click the Add Tab button to add a new tab.

Notes:

  • The top/first tab will appear in the Preview Pane. Any tab that is greyed out is currently set to None for Enabled Platforms.
  • When creating a new tab, if the Layout field is left blank, then Shibumi will create a new Layout and generate the API name for the Layout to match the tab name.

Individual Tab Settings

When you expand a tab, you see the following options:

  1. Name or rename the tab
  2. Enabled Platforms: Determine which platforms the tab will appear on. There are four options to choose from when defining display:
    • Desktop and Mobile: Tab appears on desktop and mobile devices. Layouts will snap into mobile-mode when on a mobile device, or if window screen is shrunk within mobile dimension criteria, stacking sections and Form fields vertically.
    • Desktop: Tab will only display on desktop devices.
    • Mobile: Tab only appears on mobile devices. Sections do not adjust; layouts will appear exactly as configured on the template.
    • None: Tab will not display on desktop or mobile devices, rendering it hidden at all times.
  3. Layout API Name: Select this dropdown to define an existing Layout to the tab.  Leaving this field blank will create a new Layout for the tab. Select the Add Layout to add an additional Layout to the Tab, each Layout should have its own Visibility Expression.
  4. Set a Visibility Expression: Enter an expression to conditionally display the specific Layout for a tab on instances of the template. See our expressions documentation for more details on writing expressions.

Note: All tab visibility is still applied. The Enabled Platforms setting determines whether the tab is available on the device. The visibility logic determines whether it will be displayed to the user.

Click Save at the bottom of the dialog to save all changes.

Managing Layouts on Tabs

On the Configure Tabs dialog, the settings for each individual tab will display the Layout(s) that have been mapped to a tab alongside the Visibility Expression that determines if/when the layout will be displayed.

In the instance of multiple layouts, you can delete a Layout from a tab, select the “X” on the far right of the dialog.  The order of multiple Layouts referenced on a tab can be changed in two ways:

  1. By click and dragging the Layout via the dots on the left of the dialog.
  2. By defining visibility expressions for the Layouts. These visibility expressions will be evaluated in first-to-last order, the first Layout to match the conditions will be displayed.

There must always be one Layout for a tab, so the first Layout for the tab cannot be deleted.

Updated on February 13, 2023

Related Articles