Creating Tabbed Grids

Oracle recommends using a tabbed grid design if your grid contains many columns that extend past the right side of the page. Do this by adding tab separator controls to your grid.

This example illustrates a tabbed grid on the Define Personalizations page. The grid includes three tabs labeled Definition, Format, and Explanation.

You can give users the option of expanding all of the columns to the right so that they are visible when using the browser’s horizontal scroll bar. This is particularly useful to power users who do a great deal of intensive data entry. The Enable View All Columns check box on the Use tab in the Grid Properties dialog box controls this feature and is selected by default. The Expand All button appears to the right of the grid tabs, as shown in the preceding screen shot. After the grid is expanded, the Show Tabs button appears to enable the user to collapse the grid so that the tabs appear again.

Note:

Each time the user selects a new tab results in a trip to the web server to retrieve the next set of columns.

This example illustrates the page definition that corresponds to the preceding example. Within the grid control, note the three tab separators: Definition (tab order 6), Format (tab order 14), and Explanation (tab order 24).

To create a tabbed grid:

1. Insert a grid control on the page.

2. (Optional) If you want to freeze one or more columns so that they are displayed on all grid tabs, insert those columns first. Select the Freeze Grid Column check box on the Use tab for each frozen column. See Freezing Grid Columns for more information.

3. Insert a tab separator control for the first grid tab.

4. Double-click the tab separator to access the Tab Separator Properties dialog box:

   1. Specify the label properties on the Label tab.

      Select None, Text, or Message Catalog. If you select Text, enter the label text and select the label alignment. The label text that you select appears on the tab in the grid.

   2. On the General tab, determine whether you want to enable the tab separator as a page anchor.

      If so, select the Enable as Page Anchor check box and enter a page field name.

   3. On the General tab, determine whether you want to specify row headers for screen readers. See “Columns and Row Headers” in Setting Grid General Properties for more information.

      Note:

      To set row headers, you will need to complete step 5 to insert all of the columns for the tab.

5. Insert the set of columns to appear on the first tab.

6. For each tab, repeat steps 3–5 as necessary.

Alternatively, you can place all of the columns in your grid first and then insert tab separators before each set of columns.

Note:

The grid tab must contain at least one visible, non-frozen column or the tab is not displayed.

Guidelines for Tab Separators on Fluid Tabbed Grids

On a fluid grid, if you want to insert tab separator controls, the following guidelines should be applied.

• The first column must be a tab.

  This guideline is enforced when you save a grid in Application Designer.

• You can hide the first tab only if all other tabs are hidden or the first tab does not have visible columns or does not have columns.

Both these guidelines are enforced when users personalize fluid grids on PIA.