Creating Sectional Tabs on a Page

You can create sectional tabs embedded on a fluid page to control which portions of the page data are displayed depending on the tab selected. Using the page controls and techniques described in this section will create sectional tabs that are rendered, styled, and tagged to standards that work with assistive technology.

The following example illustrates sectional tabs:

Example of sectional tabs

Sectional tabs are not a separate, distinct page control found in Application Designer. Instead, you can use one of three methods to create sectional tabs:

  • A group box of type TabSet. Each tab item is a hyperlink contained within a group box of type TabItem.

  • A grid with a layout of Tab Set Grid Layout. Each row in the grid is a tab item.

  • A scroll area with a layout of Tab Set. Each row in the scroll is a tab item.

To create sectional tabs:

  1. Create the tab set container using one of three options:

    • To create a static set of tabs, use a group box of type TabSet.

    • To create a dynamic set of tabs, use a grid with a layout of Tab Set Grid Layout.

    • Alternatively, use a scroll area with a layout of Tab Set to create a dynamic set of tabs.

  2. Define tabs within the tab set container depending on the option selected in step 1:

    • If the tab set container is a group box, create a group box of type TabItem for each static tab. Within each tab item group box, insert a single control, a hyperlink that executes the PeopleCode for this tab. If you require a complex grouping of controls, use a grid or scroll as the tab set container.

    • If the tab set container is a grid or a scroll area, you can create a simple grid or scroll with one column: a hyperlink that executes the PeopleCode for this tab.

    • Alternatively, if the tab set container is a grid or a scroll area, you can also create a grouping of columns to be acted upon as a single tab: a layout group box as the first column in the grid (in a scroll, this layout group box contains the other columns), one hyperlink that executes the PeopleCode for this tab, and any additional controls such as images or counters (badges) to adorn the tab.