Tab Set

The Tab Set is a layout component that is used to group other components within tabs that end users click through to see page features and data. Many Skuid components can be organized within specific tabs in the Tab Set to extend app functionality while reducing time spent scrolling down the page.

Using the Tab Set Component

Fundamentally, the Tab Set can provide more concise and guided user experiences by allowing end users to switch between sets of data, visualizations, and more with a click. From a user perspective, tabs can be used as guides for inputting or updating information, making applications more intuitive, and reducing time spent scrolling or clicking through an app.

Add a Tab Set to the page, then equip it with tabs, and fill the tabs with components.

Add Tabs

  • Add tabs by clicking fa-plus-circle Add Tab on the Tab Set.
    • The Tab Set defaults to one tab.
  • Remove tabs by clicking on the tab and clicking fa-times-circle Remove Tab.
  • Reposition tabs by clicking and dragging them left or right to the desired location in the set.

Add Components to Tabs

  • Add components by clicking and dragging desired components into a tab within the Tab Set. Component properties can then be modified as usual to adjust appearance and behavior.

Note

Adding a Tab Set component to a tab will create a set of subtabs.

Properties

Tab Set Properties

Basic tab [[]]

  • Tab Navigation: Controls how tabs appear on the page. Options are:

    • Tabs on Top: Each tab is listed horizontally atop the container.

      tabs-on-top

    • Left Tab Bar: Each tab is listed vertically on the left side of the container.

      tab-set-left-tab-bar

    • Right Tab Bar: Each tab is listed vertically on the right side of the container.

      tab-set-right-tab-bar

    • Picklist: Tabs are selectable within a picklist above the container.

      tab-set-picklist

    • Radio Buttons: Tabs appear as individual radio buttons that end users can click to enable.

      tab-set-radio-buttons

  • Remember user’s last tab: If true, Skuid’s personalization framework will remember the last tab an end user was on and will automatically reopen that tab when the user returns to this page.

  • Defer rendering of tab contents (makes page load faster) (highly recommended): If true, only the contents of the first tab listed—or last tab selected (if personalization is enabled)—is rendered when the Tab Set is initially displayed on screen. The contents of all other tabs will remain hidden until the end user selects them.

    If untrue, content for all tabs will load immediately upon page load, which may drastically slow down load times for pages with complex Tab Sets.

    Note

    If the first listed or last selected tab is conditionally hidden, then its rendering will also be deferred.

  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

  • CSS Class (optional): Assign a CSS class to the component’s DOM element.

Display Logic tab [[]]

Standard conditional rendering options are available.

Tab Properties

Basic tab [[]]

  • Tab Label: The text that appears as the tab’s title in the component. Defaults to “New Tab.”
  • Icon (optional): A visual icon that will appear beside the tab label. Commonly used to guide users to relevant information more quickly. Click fa-question to open the library of available icons.

Advanced tab [[]]

  • Tab panel Unique Id (optional). Allows for a tab’s content panel to be reliably referenced via JavaScript or set via a URL hash, such as apex/skuid_UI?page=AccountDetail#CasesTab.
  • Load Lazy Page Include components in this Tab when it is selected: If true, will load any “lazy” Page Include components not already loaded.

Actions tab[[]]

Use these properties to add actions to individual tabs on the Tab Set.

  • When first shown: Actions will only run the first time an end user selects this Tab on page load.
  • Whenever Rendered: Actions will run every time an end user selects this Tab.

Display Logic tab [[]]

Standard conditional rendering options are available.