Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Tab Set

The Tab Set is a layout component used to group other components within tabs that end users click to see page features and data. Nintex Apps components can be organized within specific tabs in the Tab Set to reduce time spent scrolling down the page.

The Tab Set is responsive, adjusting to the size of the screen. When there is not enough horizontal space to display all the tabs, some are displayed in a dropdown menu under the header "More."

Using the Tab Set Component

The Tab Set provides more concise and guided user experiences, letting end users to switch between sets of data, visualizations, and more—with just a click. 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 Add tab on the Tab Container.
    • The Tab Container defaults to one tab.
  • Remove tabs by clicking on the tab, then clicking Remove.
  • 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

Component properties

  • Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
  • Remember active tab: If true, Nintex Apps'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 tab rendering: Defer tab rendering makes it easier to build performant pages. of loading all the data in tabs when the page loads, this directs the page to only load and render the selected tab. Combine this with Remember active tab for a great user experience.
  • Allow HTML in tab labels: When the Allow HTML property is checked, any HTML markup within the column header label value will be parsed and rendered per the markup.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note: 

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margin: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.
    • To set margins for each side individually, click Separate.

    Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

  • Height Strategy:

    • Fit to content: Sizes component to fit the nested components within.

      • Min/Max height (optional): The minimum or maximum height of the component. Options are:

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

    • Fixed Height: Sets an absolute height.

      • Height:

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

Standard display logic options are available to display or hide the component or feature.

Nested elements

Tab properties

  • 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 warning to open the library of available icons.
  • Change order: Adjusts the left/right order of the tab within the component. Click arrow-left to move a tab to the left, and click arrow-right to move a tab to the right.
  • 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.

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.

Click add Add action, then select:

Standard display logic options are available to display or hide the component or feature.