Configuring a Tab Panel view component

To add a Tab panel component to a view definition

1. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
2. Select the application for which you want to add a Tab panel component.
3. On the Views tab, click the name of the view definition to which you want to add a Tab panel. You can also create a new view definition by using Tab panel.
4. From Palette, drag Tab panel to the canvas.

5. In the Properties pane, enter the required properties for the Tab panel component. The following properties are available: 

   Property	Description
   Name	Enter the name of the tab panel. If you give a name to the tab panel, it helps identify the Tab Panel in data sets.
   Style	Specifies the display format for the tab panel. The following styles are available: Primary—Displays the tab panel with a grey background color. Secondary—Displays the tab panel with a black border and no background color.
   Hidden	Turn on the toggle key to hide the Assignment component at runtime, and then select one of the following options: At all times—Select this option if you want to keep the component hidden at all times. When condition is true—Select this option if you want to hide the component only if a certain condition is met. Condition—Build an expression to define a condition. This option is displayed only after you select the When condition is true option.

   Important

   You can use the Set property option in the action button to set the Active Tab Index property of the Tab panel. By setting the Active Tab Index property of the Tab panel, you can activate a tab or tab panel. For more information about setting the Active Tab Index, see Configuring actions by using an action button.

6. Click Add tab to add multiple tabs to the ab panel.
   By default, the tab panel has two tabs. 

7. Select the tab panel and set the following tab properties: 

   Property	Description
   Label	Add a name to be displayed on the tab.
   Icon	Defines the icon you want to display for the tab. You can select the icons in one of the following ways: Click the list that displays the list of all the available icons. Type the name of the icon and select the desired icon. Click Browse, and from the Select icon window, select the desired icon.
   Icon position	Specifies the position of the icon relative to the tab label. You can select from the following options: Start  End
   Badge text	Sets the text for the badge. Badges are labels that display short text, such as the number of unread messages or status. Click Click to build an expression to define the text for the badges.   Important: You can set the badge text by using the Set Property action in the action button. For more information, see To configure the Set property action.
   Badge color	Specifies the color for the badge. The badge color supports the following values: Primary Secondary Information Success Warning Danger
   Enable lazy loading	Loads the contents of the tab only when the tab is clicked and active.
   Number of columns	Divides the tab panel area into different columns. Select the required number of columns in the Tab Panel component. You can set up a maximum of six columns. You can change the span size of the column. By default, the columns are divided in a symmetric order depending on the number of columns you select.  For example, if there are 3 columns, the column span is 4 for each column.  Tab Panels are based on a 12-column grid system and the sum of column spans within one tab panel is always 12. The minimum span for a column is 1, and the maximum span is 12. To change the column span, on the column span field, reduce or expand the column span by using the auto-expand available on the field, as shown in the following image:
   Row wrap	Controls the layout of multi-column containers based on the width of the view. The default value is Small.  If you add a container to an existing container, it automatically inherits the Row wrap property from the parent container. If you change the Row wrap value of the parent container, you are prompted to set all child containers to match its value.
   Hidden	Turn on the toggle key to hide the Assignment component at runtime, and then select one of the following options: At all times—Select this option if you want to keep the component hidden at all times. When condition is true—Select this option if you want to keep the component hidden only if a certain condition is met. Condition—Build an expression to define a condition. This option is displayed only after you select the When condition is true option.
   CSS classes	Defines the style of the component. The available options are no margin, 1 pixel border, and white background. For more information, see CSS-classes-used-in-View-designer-components.

8. Add the view components in the tabs of Tab panel as per the requirements.
9. Click Save.