TabControl

Abstract

This topic describes how to use the TabControl component in SPEAK.

A TabControl displays one or more tabs.

You define the tabs of a TabControl with configuration items based on the Tab template (“tab configuration items”). You add content to these tabs by adding components to the tab configuration items. By convention, you create the tab configuration items in a folder under PageSettings.

You can add the tabs to the TabControl in three ways:

  • Put the tab configuration items in a folder and point the DataSource property of the TabControl to this folder. The TabControl displays the tabs in the order that they appear in the folder. The TabControl always shows all the tab items in this folder.

  • Add the tab configuration item IDs to the Tabs property of the TabControl in a pipe (‘|’) separated list. The TabControl displays the tabs in the order that you list them.

  • Add the tabs dynamically from code. You create a list of tab items and add this list to the tabs member of the TabControl. The TabControl displays the tabs in the order that they are in the list.

A TabControl always uses the DisplayNames of the tab configuration items as the tab labels.

Tab configuration items

Tab configuration items can include any component. You do not need to specify a placeholder for components that you add to the tab. Components defined on the tab configuration item without placeholders appear in the tab content area. If you add a component that introduces placeholders to the tab, you can assign components to these placeholders as you would normally.

Tab configuration items have a field called IsHidden. You can set this field at design time. You can change the field at runtime with two members that the View model of the TabControl provides: hideTab and showTab. You can use these methods to change the visibility of tabs dynamically.

You use these methods in the same way as this example from the Click property of a Button control:

javascript:app.TabStrip4.viewModel.showTab('{C29A2AFE-1762-49AB-89CB-BEAF077C152C}')" })

The methods expect the Sitecore ID of the tab to show or hide as an argument.

You can add tooltips to the individual tabs in the Tooltip field of the tab configuration items.

Nested tabs

You can add a TabControl to a tab configuration item layout to add a set of tabs within a tab: the tabs are nested.

Note

You should not add a folder for the nested tab items subfolder of a folder that contains tab items (SPEAK reads the folders recursively, so the tabs items would be mixed up).

The TabType property defines the style of the tab buttons. Valid options include:

  • Normal

    The individual tabs appear as rectangular buttons with a background color.

  • Progressive

    The individual tabs appear as “arrow” buttons with a background color. You can use this to give users a visual clue about the steps in a sequence.

    The TabControl itself does not provide any logic for the sequence of steps. You can use the SelectedTab property/member and the SelectedTabIndex member to implement this logic in PageCode.

  • SubTab

    The individual tabs have a different appearance, which makes it easier to differentiate the enclosed TabControl from the parent tab. Set the TabType property of a nested TabControl to SubTab to create the best visual experience.

Properties

Name

Description

Default

Appearance

TabType

Set to Normal, Progressive or SubTab.

Normal

Data

SelectedTab

The Item ID of the selected tab. You can read and write this property.

TabControl initially selects the first tab (the first in the folder or in the list) if this property is not set.

Tabs

A list of Item IDs of tabs.

Configuration

You can create a configuration item for a TabControl by creating an item based on the TabControl Parameters template.

The configuration item has these specific fields:

  • Tabs

  • SelectedTab

  • TabType

It inherits these fields:

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id