Tabbed Grid (DOC) by stariya



Tabbed Grid – Makes Navigating a Long Grid Easy

Why use a Tabbed Grid?
PeopleSoft recommends using a Tabbed Grid design if your grid contains many columns
running off the right side of the page. We can freeze columns on a Tabbed Grid to keep
important columns in view while we navigate other columns on the grid. A Tabbed Grid
makes it easier for users to navigate through large volumes of data on a Peoplesoft page.

What is a Tabbed Grid?
We define a Tabbed Grid as a grid on a page that divides its contents into “Tab” sections.
We click on these tabs to access content in these sections. Refer to Figure 1 for a
screenshot of a Tabbed Grid. The grid contains more columns than the display area on
our PC monitor. We “break-up” the columns into sections using a tab to label each
section. The columns under every tab belong to the same grid. Hence, we refer to this
grid as a Tabbed Grid.

Fig. 1 – An example of a Tabbed Grid

How do we add tabs to a grid?
We add tabs to a grid in Application Designer. We assume that you have a page with a
grid open in Application Designer while you follow the steps below.

   1. Click on the “Tab Separator” button on the tools menu. Refer to Figure 2.

       Fig. 2 – Location of Tab Separator button

Created on 2/8/2008 9:05:00 AM                                                 Page 1 of 4

   2. Click on the grid column to insert a “Tab Separator” after that column. The grid
      columns to the right of that “Tab Separator” will appear under that tab.

      Fig. 3 – A new Tab Separator on a grid

   3. Double-click on the “Tab Separator” column to view its properties. Choose
      “Text” from the Label Type drop-box, then type in the text that will appear on the
      grid tab. Select the tab label’s text “Alignment”, then click OK. We will accept
      the default settings on the “General” tab.

      Fig. 4 – Tab Separator Properties Box

Created on 2/8/2008 9:05:00 AM                                               Page 2 of 4

      Fig. 5 - A labeled Tab Separator on a grid

   4. Double-click on a grid column to open its properties. Then choose the “Use” tab,
      and check the “Freeze Grid Column” box to allow that column to appear in all

              Fig. 6 – Grid column properties

Created on 2/8/2008 9:05:00 AM                                              Page 3 of 4

   5. Insert a Tab Separator as the first column of the grid. This will create a tab for
      users to return to the left-most columns on the grid.

      Fig. 7 – A Tab Separator in the first column

   6. Save your changes. You can login to Peoplesoft Internet Architecture and view
      your Tabbed Grid.

   7. Click on the tabs. Notice that the columns with their “Freeze Grid Columns”
      boxes checked appear in all tabs.
          a. Users can over-ride the “Freeze Grid Columns” setting using the
             “Customized” link on the right-hand corner of the grid.
          b. Users can click on the        icon to view all columns at once, and click on
             the       icon to return to Tabbed Grid view.

End of tutorial : Tabbed Grid – Makes Navigating a Long Grid Easy

Created on 2/8/2008 9:05:00 AM                                                  Page 4 of 4

To top