Tab Section

Tab Section is a basic container coach view that enables you to organize other controls in tabs. At run time, users can switch between tabs to access the available controls.

Configuration properties

To add multiple controls to each tab, you can place a or inside the Tab Section container. Typically, the height of the Tab Section is the height of the currently displayed content.

Set or modify configuration properties for Tab Section, such as appearance and behavior properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for Tab Section are listed in the following table:

Table 1. Appearance configuration properties for Tab Section
Appearance configuration property	Description	Data type
Color style	The color style for the control. The colors correspond to variables in the specified theme.	`String`
Tab style	The appearance of the tabs. Available options are `Default` and `Simple`.	`String`
Size	The size of the tabs.	`String`

The behavior configuration properties for Tab Section are listed in the following table:

Table 2. Behavior configuration properties for Tab Section
Behavior configuration property	Description	Data type
Default tab index	Specifies the default selection for the tabs. The selection indices start at `0`, which places the default selection on the first tab in the control. If no value and no data binding are specified, the default index value is `0`. If you do not want a default selection be specified, set the value to `-1`.	`Integer`

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

Tab Section has the following types of event handlers:

On load: Activated when the page loads. For example:
```
me.setCurrentPane(1)
```
On tab changed: Activated when the tab is changed. For example:
```
if(oldTabIndex == 0){ ${ModalAlert}.setEnabled(true); }
```

Methods

For detailed information on the available methods for Tab Section, see the Tab Section JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.