This documentation supports the 22.1 version of BMC Helix Innovation Studio.

To view an earlier version, select the version from the Product version menu.

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 the 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: 

    PropertyDescription
    NameDefine the name of the tab panel. Giving a name to the tab panel helps to identify the Tab Panel in data sets.
    HiddenSet this property if you want to hide the Tab Panel.
    Available on devices

    From the following device options, select the devices on which the Tab Panel should be visible:

    • Desktop
    • Mobile
    • Tablet

    By default, all three options are selected. 

    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 LoadingLoads 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.

    HiddenIf set hides the tab in the tab panel.
    Available on devices

    From the following device options, select the devices on which the tab should be visible:

    • Desktop
    • Mobile
    • Tablet

    By default, all three options are selected. 

    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

Was this page helpful? Yes No Submitting... Thank you

Comments