Configuring a Tab Panel view component

BMC Helix Innovation Studio now includes a Tab panel view component in the View designer, which helps you to organize page content within multiple tabs. This helps to segregated view of the data and reduce length of the page to avoid scrolling. 

As an application business analyst, you can:

• add and remove tabs in the tab panel
• determine the order of the tabs
• name the tabs of each panel
• manage content within each tab panel
• hide and show tabs
• activate tabs to make the content of that tab visible

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 the Palette, drag the 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	Defines the name of the tab panel. Giving a name to the tab panel helps to identify the Tab Panel in data sets.
   Hidden	Set this property if you want to hide the Tab Panel.

   Important

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

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

   Property	Description
   Label	Add a name to be displayed on the tab.
   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 auto-expand available on the field, as shown in the following image:
   Row wrap	To control the layout of multi-column containers based on the width of the view, select Row wrap. 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	If set hides the tab in the tab panel.

   Important

   By default, the tab panel has two tabs. You can click Add tab to add multiple tabs as required.

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

Related topics

Defining-the-user-interface-through-view-definitions

Creating-or-modifying-view-definitions

Creating-a-view-for-a-record-instance-by-using-record-editor

Creating-a-tabular-view-of-record-instances-by-using-a-record-grid