Using Grids

This section provides overviews of grids and discusses their properties and options.

Note: A specific type of grid called an analytic grid can be used exclusively for applications built for the PeopleSoft Analytic Calculation Engine.

Scroll controls and grid controls function very similarly. Grids are more compact and display fields in a spreadsheet-like format. You insert page controls into a grid and associate the controls to record definitions, just as you do in a scroll control.

You can insert these page controls into a grid:

  • Check boxes.

  • Drop-down list boxes.

  • Edit boxes.

  • Long edit boxes.

  • Push buttons or links.

  • Images.

  • HTML areas.

  • Secondary pages.

  • Subpages.

  • Tab separators.

Note: When designing grids, use prompts in place of drop-down list boxes for better performance.

When you accept the default settings of grids, the grid appears with :

  • A data navigation bar at the top of the table that enables the user to page through additional rows of data.

  • Delete and Add buttons at the end of each row that enable the user to insert and delete rows in the grid.

    The inserted row appears under the current row. These buttons appear automatically as determined by the grid properties (display-only, no row insert, and no row delete).

  • An occurs count of 1.

    You can set the grid to be any size at design time and then set the occurs count to control the maximum number of rows to display at runtime.

There are three areas on a grid to which you can apply labels or image buttons to help the user navigate through the data in the grid. Set properties for these areas:

  • Header

  • Body

  • Footer

PeopleSoft Application Designer enables the user to personalize a grid at runtime. By default, grid personalization is enabled. To change the default settings for grid personalization, open the Grid Properties dialog box and click the Display Navigation Bar Properties button. Grid personalization settings appear on the Personalize tab in the Header Navigation Bar Properties dialog box.

Note: If you do not display the grid header bar, the Personalize link is not available to the user unless you enable it for the footer area.

Image: Personalize Column and Sort Order page

This example illustrates the fields and controls on the Personalize Column and Sort Order page. You can find definitions for the fields and controls later on this page.

Personalize Column and Sort Order page

When the user clicks the Personalize link for a grid on a transaction page, the system opens the Personalize Column and Sort Order page, where custom parameters can be set for that grid. This page contains a sample grid that displays a few rows of real data from the buffer in display-only format. If there is no data in the buffer for that grid, only the column headings appear. Tabs in the grid are active so that the user can view all sample data.

From this personalization page, users can control the column and sort order, as well as copy other users' grid settings or choose to share their settings with other users once they save their changes.

The Column Order grid displays the columns in their current order, including tab separators. The list of fields is driven by the page definition but excludes columns that are hidden by PeopleCode. The user can hide columns and change their sort order. Users can also freeze grid columns. Columns that you freeze at design time automatically appear to the user as already frozen. However, the user has the option of overriding this setting.

The Sort Order grid enables the user to control the ascending and descending sort of each column, with the exception of tab separators, images, push buttons, links, and HTML areas. Users can sort hidden fields, however. The default setting is ascending for each column.

After making changes, the user can accept, preview, restore defaults, or cancel selections. If the user saves the new settings by selecting OK, the system stores the new settings as persistent values for that user based on a key structure. Therefore, each time the user accesses this grid, the system uses all personalization options that were set previously. The user can restore all default settings by selecting the Delete Settings link to remove all stored personalization settings from the database.

The user can override the persistent sort order directly on the transaction page by clicking the linked field label to affect the sort. Clicking the link repeatedly toggles between ascending and descending sort order for that column. This type of sorting directly in the transaction page is not persistent.

Note: You can continue to use the Sort method of the Rowset class, but the user can override the defined sort with this feature.

Important! Modifying a grid or a page definition that contains a grid removes all runtime user personalizations associated with the modified page and the grid. Therefore, if users personalize grid column and sorting options for a grid, make sure they are aware that after system administrators apply updates and upgrades, it is likely that users will need to reapply their personalization options.

To insert a grid on a page:

  1. Select Insert > Grid.

  2. To adjust the grid width, drag the horizontal or vertical control handles.

    The horizontal grid width should be roughly equivalent to the columns that you insert into the grid. Otherwise, your grid might appear wider than necessary at runtime.

This section discusses how to:

  • Insert grid columns.

  • Delete grid columns.

  • Move grid columns on the Layout tab.

  • Move grid columns on the Order tab.

  • Resize grid columns.

Inserting Grid Columns

To insert a grid column:

  1. Use one of these methods to insert a column:

    • Select a page control from the Insert menu or the page control toolbar and click the grid.

    • Drag a page field from inside the current page or from another page.

    • Copy and paste a page field or record field.

    • Drag a definition (such as a record field, a page field, or an entire record definition) from the project workspace.

      The new location of the definition or control is determined by the location of the upper left-hand corner of the drag rectangle, or by the mouse cursor if no drag rectangle appears. PeopleSoft Application Designer automatically places the first column on the left-hand side of the grid.

  2. Click your mouse or release the field in the gray area of the grid.

    Place new columns to the right of existing columns by clicking or releasing the control in the gray area of the grid where no columns are present. To place a column between two grid columns, release the new column in the first of the two columns.

When inserting subpages into your grid as a column, be aware that:

  • You can insert subpages by dragging them from the project workspace or by cutting and pasting from the page to the grid.

  • Only one column displays in the grid in PeopleSoft Application Designer representing all fields in the subpage.

    At runtime, all fields display in the order they appear on the Order tab of the subpage.

  • You cannot insert subpages that contain fields that are not allowed in grids such as static text or radio buttons.

    The system generates an error indicating the invalid field type. Similarly, if at a later point an invalid field type is added to a subpage already in a grid, the system generates a runtime error when the user accesses the page containing the subpage.

  • The subpage you insert can contain fields that are associated with subrecord record fields.

    The same record name substitution mechanism that applies to subpages inserted onto a page applies to those inserted as grid columns. The system replaces the name of the subrecord as part of the expansion process and it is never seen at runtime.

    See Understanding Subpages.

Note: The rich text editor is not supported within grids. If you insert a long edit box and make it rich text-enabled, the system automatically sets the long edit box Use properties to Display Only. (Use tab > Field Use Options > Display Only.)

Note: Long edit boxes inserted into grids and set to display only always display the field content in expanded mode, regardless of how the Expand Field When Display Only option is set. (Use tab > Field Use Options > Expand Field When Display Only.)

Deleting Grid Columns

To delete a grid column:

  1. Select a column by right-clicking the column heading.

    Be sure that you select only the column and not the grid as a whole; otherwise, you might delete the entire grid instead of just the column. The grid is selected when control boxes appear around the edges of the grid. The column is selected when it turns black.

  2. Select Delete from the pop-up menu.

Moving Grid Columns on the Layout Tab

To move grid columns on the Layout tab:

  1. Select a column by clicking the column heading.

  2. Drag the column to its new location.

  3. Release the mouse button over the column that is to the left of the new location.

Moving Grid Columns on the Order Tab

To move grid columns on the Order tab:

  1. Select the column row by clicking the row number.

    The grid and grid columns are clearly distinguished from other page fields on your page. The grid is identified by the Type column. All columns in the grid are directly below in a lighter green. Nongrid page field rows are white.

  2. Drag the row to the new position in the grid.

    A red line indicates the new position of the column before you release it. You cannot move a column outside of the grid when working on the Order tab. Similarly, you cannot move an existing page field from elsewhere on the page into the grid. Both of these operations can be performed on the Layout tab.

Resizing Grid Columns

You can resize grid columns in PeopleSoft Application Designer by dragging the right border of the column heading.

After you insert the page control or field into your grid, you can set the properties for that field as you would set properties for any other page control. Access the field properties by double-clicking the column heading.

Column headings and their alignment are derived from the label text that you select on the Label tab of the page field properties dialog box. The alignment of column contents is derived from the alignment settings on the Record tab of the page field properties dialog box. If alignment settings aren't available on the Record tab, then the system uses the Label alignment settings. For column headings, use the following guidelines for label alignment. Do not use colons in column labels.

Field Type

Label Alignment

Push button

Center Align

Link

Left Align

Character

Left Align

Numeric

Right Align

Check box

Center Align

Field data

Auto (automatic)

Default Image Field Dimensions in Scrollable Grids

When working with scrollable layout grids that include image fields, consider these default behaviors:

  • The default row height for 28pix.

  • The header label width determines the default column width.

  • Grid cell dimensions do not resize automatically to accommodate a stored image with dimensions that exceed the default dimension.

If you have images with dimensions that exceed the default dimensions of (28 x (column width)) then users are unable to see the entire image because the grid cell is smaller than the image. To prevent images from being cropped by the page control:

  1. Determine and record the dimensions of the largest image in the field.

  2. Access the Image properties dialog box of the image page field.

  3. On the Record tab, enter the recorded values from step one in the Width and Height fields.

  4. Click the OK button and save the page definition.

Image: Image Properties dialog box with non-default size values

This example illustrates the fields and controls on the Image Properties dialog box with non-default size values. You can find definitions for the fields and controls later on this page.

Image Properties dialog box with non-default size values

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.

Image: Tabbed grid

This example illustrates the fields and controls on the Tabbed grid. You can find definitions for the fields and controls later on this page.

Tabbed grid

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 moves to a new tab results in a transmission to the web server to display the next page.

To create a tabbed grid:

  1. Insert a grid control on the page.

  2. Insert the columns to appear on the first tab.

  3. Insert a tab separator control after the last column.

  4. Set the tab separator properties.

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

    2. Specify the label properties on the Label tab.

    3. Specify the general properties on the General tab.

  5. Insert the next set of columns to appear on the second tab.

    Alternatively, you can place all of the columns in your grid first and then insert the tab separator between the two columns that you want separated.

  6. Repeat steps 3 and 4 if necessary.

  7. Set the tab separator properties by double-clicking the column heading of the tab separator.

    1. On the Label tab, specify the label type.

      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: The grid tab must contain at least one non-frozen and visible column or the tab does not appear.

You can freeze the first column or the first several columns in a tabbed grid so that they appear on subsequent tabs. To freeze more than one column, select the freeze option for each column that you want to appear on the following tab.

Freezing grid columns impacts the horizontal scrolling ability of the grid at design time. If you freeze a grid column that is not visible inside the boundaries of the grid at design time, you are not able to view all columns in your grid. Lengthen the width of your grid to accommodate all columns.

Freeze a grid column by selecting the Freeze Grid Column check box on the Use tab of the properties dialog box for that column. Note that the effects of selecting this attribute are visible only at runtime.

You can place as many grids on a page as you want, provided that they are at the same occurs level. They can be one above the other or they can be side-by-side, such as those in the following example. This is helpful when you must transfer data from one grid to another without switching between pages.

In the following example, the user can transfer data from the Source Competencies grid on the right to the Assigned Competencies grid on the left by using the double left arrow button. The push button is associated with a PeopleCode program, enabling it to transfer the data between the two grids.

Image: Grids side-by-side on a page

This example illustrates the fields and controls on the Grids side-by-side on a page. You can find definitions for the fields and controls later on this page.

Grids side-by-side on a page

As you can with other level-based controls, you can nest a grid in a scroll area or scroll bar. However, you cannot nest a grid in another grid.

Grid personalizations are enabled by default. To disable grid personalization:

  1. Open the Grid Properties dialog box.

  2. Select the Label tab.

  3. Click the Personalize button for the header navigation bar.

    This opens the Header Navigation Bar Properties dialog box.

  4. Select the Personalize tab.

  5. Select the Invisible check box.

  6. Click the OK button.

To enable grid personalization in the navigation footer:

  1. Open the Grid Properties dialog box.

  2. Select the Label tab.

  3. Select the Display Navigation Bar check box in the Footer Area group box.

  4. Click the Properties button for the footer navigation bar.

    This opens the Footer Navigation Bar Properties dialog box.

  5. Select the Personalize tab.

  6. Clear the Invisible check box.

  7. Click the OK button.

Access the Grid Properties dialog box. Select the General tab.

Image: Grid Properties dialog box: General tab

This example illustrates the fields and controls on the Grid Properties dialog box: General tab. You can find definitions for the fields and controls later on this page.

Grid Properties dialog box: General tab

General Attributes

Field or Control

Definition

Main Record

Select the record that contains most of the fields that you want to use in the grid. Fields that you display in the grid that are not from the main record should be display-only or related fields, which you can set on the Use tab of the properties dialog box for that column.

Page Field Name

Enter a name for the grid. The default is the main record for the grid, however, you can rename the grid as long as it is a unique name for the page or component. This name is used by the PeopleCode GetGrid function to create a grid definition.

See Understanding File Layout, GetGrid.

Occurs Level

Enter a 1, 2, or 3 to represent at which level the grid resides on the page. Having an occurs level for the grid enables you to designate the hierarchical parent-child relationship. Entering 1 specifies that the grid is at the first level. Entering 2 specifies that a grid is at the second level and is a child of, or nested in, the first level of data, and so on up to 3. A grid can be nested in another level-based control, but it cannot be nested in another grid.

See Level-Based Controls.

Occurs Count

Enter the number of rows to display initially at runtime.

See Multiple Occurrences of Data.

Unlimited Occurs Count

Select instead of setting an occurs count if you want the system to display all rows of data in the buffer for this grid. Navigation links do not appear at runtime and the size of the grid depends on the number of rows in the buffer.

Enable as Page Anchor

Select to apply an anchor tag to serve as a jump destination on the page.

Columns and Row Headers

The Row Headers list box enables you to specify which column in the grid should be used for the row header when presenting a data table for screen readers. The default row header generated is the first display-only edit field. Therefore, by default, all of the columns in the grid appear in the Columns list box; the value in the Row Headers list box is blank (no column selected).

When selecting row header values for tabbed or non-tabbed grids, consider these points:

  • For optimal results, it is recommended to use display-only or disabled fields as the row headers.

  • PeopleTools does not perform any validation regarding whether a column can be made a row header, such as in the case of a radio button field. Implementation teams need to select appropriate values.

  • With tabbed grids, when all tabs are expanded the system uses the row header from the first tab.

  • If a row header is specified, PeopleTools generates the field label of the table cells as column header + row header. If no row header is specified, PeopleTools generates the field label as the column header.

Separate considerations apply to non-tabbed grids versus tabbed grids:

  • For non-tabbed grids: The Row Header list box appears on the Grid Properties dialog box: General tab. You can select up to two columns as the row header. If you select a custom value, at run time, PeopleTools generates the row header using the column value (or values) you selected.

  • For tabbed grids: The Row Header list box on the Tab Separator Properties dialog box: General tab. Just as with non-tabbed grids, the default row header generated is the first display-only edit field. You can select up to two columns as the row header for each tab separator with the column names to be selected from the group of columns under control of that tab separator. If you select a custom value, at run time, PeopleTools generates the row header using the column value (or values) you selected.

    If you have any frozen grid columns set as a row header in a tabbed grid, the system applies that value to all tabs in the same grid, which will override previous values selected. Likewise, if a frozen grid column is deselected as a row header, the system applies those changes to all tabs in the same grid, requiring you to select a new row header value as needed.

    For more information on tabbed grids, see Creating Tabbed Grids.

Access the Grid Properties dialog box. Select the Label tab.

Image: Grid Properties dialog box: Label tab

This example illustrates the fields and controls on the Grid Properties dialog box: Label tab. You can find definitions for the fields and controls later on this page.

Grid Properties dialog box: Label tab

The Grid Properties, Label tab provides five main grid setting areas for you to configure:

  • Header Area.

  • Body Area.

  • Column Headings.

  • Footer Area.

  • Summary.

Certain grid label properties such as label text and summary text can also be set through PeopleCode.

See Grid Class Properties.

Header Area Properties

Use the header area properties to configure the title properties, the navigation bar properties, and embedded help properties associated with the grid. These properties enable users to access controls for viewing the previous, next, top, or bottom row; to control the settings for the Find, Personalize, Download, and View All features; and to access embedded help.

The Display Header check box is selected by default and enables access to Header Area properties. To disable the header, clear the Display Header check box.

To configure title properties for the grid:

  1. Select the Display Title check box.

  2. Select Left, Center, or Right title alignment option.

  3. Click the Display Title Properties button to open the Title Properties dialog box.

  4. Enter the label text that you want to appear in the grid title.

    Field or Control

    Definition

    Type

    Select the type of label text to appear in the navigation bar.

    Message Catalog: Select this option to use a message in the Message Catalog as the grid title.

    Static: Select this option to enter manual text as the grid title.

    Text

    Enter the text to appear as the title of the grid. This field is enabled when you select Static as the Label Text Type.

    Message Set/Number

    Enter the message set number and message number of the message in the Message Catalog to appear as the title of the grid. This field is enabled when you select Message Catalog as the Label Text Type.

To configure navigation bar properties for the grid:

  1. Select the Display Navigation Bar check box.

  2. Select Left, Center, or Right navigation bar alignment option.

  3. Click the Display Navigation Bar Properties button to open the Header Navigation Bar Properties dialog box.

    The Header Navigation Bar Properties dialog box contains seven tabs, each pertaining to different settings on the navigation bar. Each of these tabs has the same settings. All settings are set to display by default. Select the Invisible check box that appears in the upper right corner of each tab to hide the tab attribute from the user.

    Image: Header Navigation Bar Properties dialog box

    This example illustrates the fields and controls on the Header Navigation Bar Properties dialog box. You can find definitions for the fields and controls later on this page.

    Header Navigation Bar Properties dialog box

    This table describes the tabs on the Header Navigation Bar Properties dialog box:

    Field or Control

    Definition

    Top

    Controls the attributes for how a user returns focus to the top of the grid or the first row of data in the grid. Text is the default setting, using First from the message catalog. You can also enter static text.

    Previous

    Controls how a user can move to a previous row in the grid. Image is the default setting, with the Show Previous Row button as the default image.

    Row Cntr (row counter)

    Tracks the number of rows in the grid and in which row the cursor holds focus. Text is the default setting with, for example, 1-6 of 6 appearing in the navigation bar if there are six rows in the grid.

    The Image Type is not enabled on this tab.

    Note: The row count that appears is controlled by the occurs count that you set on the General tab in the Grid Properties dialog box (unless the user displays all). Using the previous example, if the occurs count is set to 5, then the row counter is 1-5 of 6.

    Next

    Brings focus to the next row in the grid. Image is the default setting with the Show Next Row button appearing to the right of the row counter.

    Bottom

    Controls the attributes for how a user moves focus to the last row of the grid. Text is the default setting, using Last from the message catalog. You can also enter static text.

    Find

    Displays a link that enables the user to search any field in the grid or scroll area. You can select either text or an image to represent the find feature. The Find feature searches for matches in edit boxes, display-only fields, disabled fields, dynamic links, and text in long edit boxes. It does not find column headings, field labels, text values in icons, static links, and hidden fields, nor does it search outside the grid.

    Note: The system ignores fields in HTML areas when running a Find request.

    View All

    Enables the user to view all rows of data at once. Text is the default setting using View All as the message catalog entry.

    Download

    Available for grids only. Displays a download image button in the header or footer bar that enables users to download all active, unhidden rows to a Microsoft Excel spreadsheet, regardless of how many rows are visible on the screen. The default for this setting in the header area is Invisible. For the footer area of a grid, the download button appears by default when you select the Display Navigation Bar check box in the Footer Area group box of the Label tab in the Grid Properties dialog box.

    Note: When you download a column of links comprised of numeric values, the values are downloaded as numbers instead of as quoted strings unless doing so causes Excel to modify the format of the numbers.

    Note: Microsoft Excel may display Unicode comma-delimited data differently because Microsoft Excel may be expecting a tab-delimited file. If display abnormalities occur, you have two options.

    In Microsoft Excel, after highlighting the first column, you can select Data, Text to Columns and select the options required to set Microsoft Excel to expect a comma-delimited file.

    Or, in PeopleSoft Application Designer change the file layout from comma-delimited to tab-delimited. Keep in mind that changing the file layout properties in PeopleSoft Application Designer could cause the data to change such that other applications may no longer recognize the data. Also, changing the file layout properties may impact more than one application, if that file layout is shared.

    Personalize

    Available for grids only. Displays a Personalize link in the header bar that enables the user to access all grid personalization options.

    See Enabling and Disabling Grid Personalization.

To configure embedded help pop-up properties for the grid, select from these options:

Field or Control

Definition

No Popup

Select this option to disable embedded pop-up help.

This is the default.

Message Catalog Popup

Select this option to enable the embedded pop-up help icon on the grid at runtime. Selecting this option enables the Message Set/Number edit boxes.

Message Set/Number

Enter the message set number and message number of the message catalog entry to appear when the user clicks the embedded help icon.

Text

Displays the message that appears when the user clicks the embedded help icon. This field is display-only.

View All Feature

The View All feature provides a threshold to enable the user to view the data in manageable pieces. If the database returns a number of rows for the grid or scroll area that is greater than the threshold, the View All link displays "View <threshold value>." This feature also modifies the occurs count and the values for the number of non-displayed rows left to scroll through.

The Next and Previous buttons retrieve rows according to the size of the threshold. If the database returns a total number of rows for the grid or scroll area that is less than the View All threshold, then the View All link on the navigation bar remains and functions as is.

The following example uses the View All threshold, occurs count, and total rows in database values:

  • View All threshold = 100

  • Occurs count = 10

  • Total rows in database = 160

These values result in the following for the user:

Image: Viewing 10 rows

This example illustrates the fields and controls on the Viewing 10 rows. You can find definitions for the fields and controls later on this page.

Viewing 10 rows

When the user selects View 100, the view value changes to reflect the original occurs count set for the grid. The value for the number of non-displayed rows changes to 100 to match the View All threshold, and the View 100 display changes to View 10:

Image: Viewing 100 rows

This example illustrates the fields and controls on the Viewing 100 rows. You can find definitions for the fields and controls later on this page.

Viewing 100 rows

If the Occurs Count, which you define in the properties for grid and scroll areas, is set to a number greater than or equal to the view all threshold, the threshold takes precedence. The View All display changes to View <threshold value> and the link is unavailable. If you select Unlimited Occurs Count, the grid or scroll area displays all rows in the buffer.

Body Area Properties

Use the body area properties to configure the row action buttons and set display properties for the body of the grid.

This table describes the Body Area properties:

Field or Control

Definition

Row Action Buttons

Select to display Insert and Delete buttons on each grid row at runtime. The action buttons can appear on the left or right side of the grid. Click the Properties button to open the Body Area Row Action Button Properties dialog box.

Background Style

Select a background style to display for the grid as a whole. The style selected here applies to all areas of the grid that are not covered by other elements.

Show Border

Select to display a standard border around your grid. The default is selected.

Show Grid Lines

Select to show grid lines on the grid. The default is to not display grid lines (this option is deselected).

This setting should remain deselected as grid lines are set through the style class.

Note: Show Grid Lines has no effect on fluid applications. Grid lines (if required) are applied through grid styles.

Show Row Headings (runtime)

Select to number the rows at runtime. This option is selected by default.

Note: The row headings column appears at design time even if Show Row Headings (runtime) is not selected. This enables you to more easily select the grid if necessary.

Click the Row Action Buttons Properties button in the Body Area group box to open the Body Area Row Action Button Properties dialog box. It contains two tabs: Insert and Delete. The default settings for these tabs are to display the Insert and Delete buttons. Alternatively, you can select static or message catalog text, or you can make these items invisible so that they do not appear.

Image: Body Area Row Action Button Properties dialog box

This example illustrates the fields and controls on the Body Area Row Action Button Properties dialog box. You can find definitions for the fields and controls later on this page.

Body Area Row Action Button Properties dialog box

Column Heading Properties

You can set the grid to display column headings, and you can select the style in which to display them. Select a predefined column heading style from the drop-down list box or use the default. Changing styles alters the foreground, background, and font in the column headings, making it different from the data rows. The default for Show Column Headings is selected.

Footer Area Properties

In the footer of your grid, you can display row action buttons and a navigation bar. To enable either of these features, select the appropriate check box, Display Row Action Buttons or Display Navigation Bar, and click the Properties button to configure the settings. Clicking the Properties button opens a separate dialog box: Footer Row Action Button Properties or Footer Navigation Bar Properties, respectively.

The row action buttons are the same for the footer area as those described for the body area. The navigation bar property options are the same as those described for the header area. However, all other navigation bar settings for the footer are invisible by default.

Summary Properties

Summary properties enable you to provide a brief description of the functionality and content of the grid. This property is pertinent for users who access the application by using screen readers. The default value for the Summary Text field is the same as the Title of the scroll area. You can also enter static text or use the Message Catalog to store the summary information.

Access the Summary Properties dialog box.

Image: Summary Properties dialog box

This example illustrates the fields and controls on the Summary Properties dialog box. You can find definitions for the fields and controls later on this page.

Summary Properties dialog box

This table describes the summary properties of the grid:

Field or Control

Definition

Default to Title

Select this check box to have the summary property the same as the grid title. Deselect this check box to activate the Text and Message Catalog options.

Text

Select this option to enter up to 254 characters in the Summary Text field. Selecting this option disables all Message Catalog option related fields.

Message Catalog

Select this option to choose a message stored in the Message Catalog. Selecting this option disables all Text option related fields. Select one of these two options:

  • Text: Select this option to use only the message text from the Message Catalog.

  • Explanation: Select this option to use only the message explanation from the Message Catalog.

To change the Summary properties:

  1. Click the Properties button located in the Summary group box.

  2. Clear the Default to Title check box to activate the other Summary options.

  3. Enter static text or enter a Message Set and Number to retrieve information from the message catalog.

  4. Click the OK button.

  5. Save the page.

On the Use tab in the Grid Properties dialog box, you control data entry, row style, and display options, as well as whether your grid has a pop-up menu in the navigation bar at runtime. Both the grid and scroll area share many of the same attributes. Refer to the proceeding term tables for information about these shared settings.

Image: Grid Properties dialog box: Use tab

This example illustrates the fields and controls on the Grid Properties dialog box: Use tab. You can find definitions for the fields and controls later on this page.

Grid Properties dialog box: Use tab

Data Options

This table describes the data options properties:

Field or Control

Definition

No Auto Select

Suppresses the system from retrieving data from the database automatically. Select to populate the grid or scroll area with data using the ScrollSelect PeopleCode functions.

See RowScrollSelectNew.

No Auto Update

Suppresses the system from automatically updating data based on the existing key list. Select when the grid or scroll contains work field controls that should affect only a page and not the underlying database.

No Row Insert

Suppresses the Add button in the body area so that the user cannot insert rows. If this option is selected, PeopleSoft Application Designer automatically selects and disables the Invisible check box on the Insert tab of the properties dialog box for the body area.

No Row Delete

Suppresses the Delete button in the body area so that the user cannot delete rows. If this option is selected, PeopleSoft Application Designer automatically selects and disables the Invisible check box on the Delete tab of the properties dialog box for the body area.

Allow Deferred Processing

Set by default, this option ensures that the grid or scroll area processes in deferred mode. This setting overrides any individual field-level settings in your level-based control.

Allow Multi-Row Insert (Allow Multiple Row Insert)

Enables the user to add multiple blank rows at once to a grid after a page is displayed. This feature is available only in Add and Update modes. When the user clicks the Add Multiple Blank Rows button, a JavaScript prompt appears so that the user can specify the number of rows to insert; the user can insert between 1 and 99 rows.

Allow Column Sorting

Enables the end user to perform nonpersistent sorts in a grid at runtime by clicking the column headings. The default is selected to allow column sorting automatically.

Persist in Menu

Stores the most recent transaction search in browser memory or web server memory and makes the results accessible through the drop-down navigation menu structure. To specify which fields appear as columns in the search results grid, use the Persist Grid Column in Menu property.

Note: This property applies only to fields that appear in grids on pages that are used as custom, application-specific search pages.

See Setting Record Field Use Properties.

Note: If multiple grids exist on a custom search page and you enable this property on more than one grid, the system stores the search for only the first grid as it appears in the page order on the Order tab.

You must enable recent search results caching at the system level in the web profile for this property to take effect.

See Configuring Caching.

Multirow Insert Option

Each time that a user adds a row to a grid or scroll area requires a transmission to the application server. With the multirow insert option, this transmission occurs only once when the user wants to add multiple blank rows. Selecting this option can significantly enhance the user’s experience when doing data entry and also meets the developer’s goal of limiting page processing.

At design time in PeopleSoft Application Designer, this feature is disabled by default. If the No Row Insert check box is selected, then the Allow Multi-Row Insert check box is deselected and disabled. Where the multirow insert button appears, in the row or in the footer, depends on how you define the grid or scroll area properties on the Label tab.

You can set any occurs count for your grid. When the end user inserts n rows, the occurs count for the grid or scroll area is temporarily increased to n + 1 (if necessary), showing one row of context plus the new rows. If you select an unlimited occurs count for the grid, this temporary adjustment is not necessary.

Note: This feature should not be enabled for grids and scroll areas with effective-dated rows.

When the user saves the page, normal save processing runs, including save-edits on all rows. New, unchanged rows are not saved. After save processing, new, unchanged (and unsaved) rows are deleted from the buffer. The only exception is when only one row exists and it is new and unchanged. This row remains in the buffer, even though it has not been saved, because a rowset must always contain one row.

For an end user, pressing the Alt+7 keys works the same with the multirow Add button as it does with the standard Add button.

Row Selection Indicator

These options enable the user to select one or more rows in the grid and scroll area. At runtime, indicators appear to the left of row numbers for grids and in the upper left corner for scroll areas. A transmission to the server triggers the selection of the row or rows that the user designates. These selections can then be detected in PeopleCode via the selected property on the row class for each row of data.

Field or Control

Definition

No Selection Indicator

This value is the default selection. Prevents the user from selecting rows on the transaction page.

Single Row (radio button)

Enables the user to select a single row in a grid or scroll area. Inserts a radio button to the left of each row that the user can select.

Multiple Row (check box)

Enables the user to select multiple rows in a grid or scroll area. Inserts a check box to the left of each row that the user can select. Users can select as many rows as needed.

Set Component Changed

Enables the user to receive a save warning if a change is made to a row selection indicator in the grid. At runtime, the transaction page uses this option to set the PPR_CHANGED flag. This option is deselected by default.

This property ensures that if any changes occur to the grid, the data is saved to the database.

If you disable this property, any row insert, row delete, or field change on the rowset using PeopleCode would not cause the system to treat the component data as changed.

Note: For the row selection options, PeopleCode can change the selected property, which affects which boxes are selected when the page is regenerated.

Popup Menu

Select a preset pop-up menu from the drop-down list box. The pop-up menu button appears in the left-hand corner of the navigation header at runtime.

See Creating Pop-up Menus.

Row Styles

You can control the color, font, and other characteristics of a row, active tab, inactive tab, and navigation bar by specifying a style in the drop-down list box for each of the row style options.

Grid Style

These options enable the advanced grid properties available with scrollable grid layout only.

See Viewing Data in Scrollable Layout Grids.

Field or Control

Definition

Grid Layout

See the table below for descriptions of each grid layout option.

Rows to show in scrollable layout

Enter n (number) to set the height of the scrollable grid to n visible rows.

This value represents the number of rows to show when Scrollable Grid Layout is selected and the Vertical Scrollbar check box is selected. If this number is greater than the Occurs Count set on the General tab, then no vertical scrollbar appears, regardless of whether the Vertical Scrollbar check box is selected. If this number is lower than the Occurs Count and the Vertical Scrollbar check box is selected, then a vertical scroll bar appears and this number of rows will appear in the scroll area. The scroll bar will scroll over the entire Occurs Count number of rows. To see more rows in this case, use the row navigation controls on the grids navigation bar.

If this field is set to 1, then the vertical scroll bar will not appear except in View All mode, in which case the scroll bar will display the number of rows listed in the Occurs Count setting.

The default value is 15.

Horizontal

Select to activate a horizontal grid scroll bar at the bottom of the scrollable grid.

Note: This option affects scrollable grid layout only.

Vertical

Select to activate a vertical grid scroll bar at the right side of the grid.

Note: This option affects scrollable grid layout only.

Note: Some of the grid layout types are supported only for classic pages, while others are intended only for fluid pages. If you add a classic grid layout type to a fluid page, in some situations the system displays a JavaScript error. For example, if on a fluid page, you select Classic Grid Layout for a grid, then at runtime you will see a JavaScript error when working with the grid, such as when adding new rows. To resolve the error, select Flex Grid Layout for the grid layout type for the fluid page.

Grid Layout

Description

(Classic only) Classic Grid Layout

Original grids are the standard grid layout in releases prior to PeopleTools 8.50. With original grids, you can see navigation headers and footers; insert, multi-row insert, and delete buttons; and grid separator tabs. If the Personalize link is enabled by the developer, you can search for data within the grid, sort grid data; and rearrange, freeze, and hide columns to personalize your grids.

(Classic only) Classic Scrollable Grid Layout

Unlike original grids, scrollable grids take advantage of AJAX technology, which enables you to change the grid structure and content directly on the grid. You can make changes to scrollable grids directly from the transaction page without using the Personalize link. Additionally, scrollable grids can be configured to scroll data within the grid control so as to keep frozen columns or column headers from scrolling out of view. Scrollable grids enable you to navigate from cell to cell vertically and horizontally.

Important! If you have a Classic Scrollable Grid Layout grid displaying over 300 rows and you encounter performance issues in the browser, Oracle recommends that you convert the grid to the Classic Grid Layout. This allows the page in the browser to scroll, but not the grid. This reduces the overhead of keeping the grid column headers fixed and they will scroll along with the rest of the page content.

Note: For scrollable grids, PeopleTools does not support any other style class apart from the default style classes applied to scrollable grids by the system. The styles applied to scrollable grids should not be customized, and you should not apply custom styles.

Note: With Scrollable Grid Layout selected for a grid, on mobile devices, such as tablets or smartphones, the system displays the grid on the mobile device as Original Grid Layout.

Note: HTML area controls should not be inserted into grids set to Scrollable Grid Layout. The system cannot calculate an HTML area's width and height data, which is required for the grid columns to be aligned and to display the correct number of grid rows.

(Fluid only) List Grid Layout (Unordered)

Used to contain a list grid for displaying lists of items. It represents a grid as an unordered list (using <ul> and <li> tags).

List Grid is not a table grid. Therefore the proper use can be to have a grid with only one visible grid column.

(Fluid only) Data Grid Layout

Select so users will not see the grid displayed on the fluid page, as if the grid is hidden. The data in the grid is stored in two JavaScript variables, as in one for the grid header columns and one for grid row data. You need to write custom JavaScript to use the grid data stored in the two variables.

(Fluid only) Div Grid Layout

Represents a grid as a structure of HTML <div> elements. This allows for the dynamic creation of structures on a page that are not restricted to the display of tables or lists. It creates a structure of containers that allows more dynamic displays of data, if needed.

(Fluid only) Flex Grid Layout

A table-based grid recommended for displaying tabular data to the end user in fluid mode. This grid layout type is based on the Original Grid Layout, but enhanced to take advantage of the “flex” model in fluid mode.

(Classic only) Classic List Grid Layout (Unordered)

Creates a bulleted list in a one-column grid.

The system generates an unordered list with <ul> </ul> HTML tags instead of <table> </table> tags, indicating the content is an unordered list containing rows of list item tags (<li> </li>) for the rows of data.

(Classic only) Classic List Grid Layout (Ordered)

Creates a numbered list in a one-column grid.

Similar to the unordered list, except that instead of unordered list tags (<ul> </ul>) tags the system generates ordered list tags ( <ol> </ol> ) to contain the list items.

(Classic only) Classic Presentation Grid Layout

The system generates the <table> tag with the role = “presentation” clause added to it. This indicates to a screen reader that the grid is for presentation and layout purposes, rather than data.

In some cases, you may want to use a table for layout purposes only (keeping elements aligned in a certain way, for example). By specifying this option, PeopleTools adds a WAI-ARIA tag to the table so a screen reader will ignore the table (not treat it as a data table).

(Fluid only) List Grid Layout (Ordered)

Used to contain a list grid for displaying lists of items. It represents a grid as an ordered list (using <ol> and <li> tags).

List Grid is not a table grid. Therefore the proper use can be to have a grid with only one visible grid column.

For the Original List Grid Layout types (ordered and unordered), the following restrictions apply:

  • Only the first edit box or hyperlink column in the grid will be displayed. Any subsequent columns in this type of grid will be ignored as will any other type of column that comes first. For example, push buttons, drop-down lists, check boxes, and so on, will all be ignored and not displayed.

  • The grid will be display only, regardless of how it is set in Application Designer.

  • The Add Row and Delete Row controls will not be displayed on the rows.

  • Odd/Even row highlighting will be disabled, regardless of how it is set in Application Designer.

  • Header and Footer areas that would normally be available in other types of grids will not be displayed. These would normally contain elements like navigation controls, such as (First < 1 – 10 of 80 > Last), the Find and Personalize links, the Download to Excel and Zoom controls, and so on.

  • Column headers will not be displayed.

For the Classic Presentation Grid Layout, these restrictions apply.

  • Odd/Even row highlighting will be disabled, regardless of how it is set in Application Designer.

  • Header and Footer areas that would normally be available in other types of grids will not be displayed. These would normally contain elements like navigation controls, such as (First < 1 – 10 of 80 > Last), the Find and Personalize links, the Download to Excel and Zoom controls, and so on.

  • Column headers will not be displayed.

The grid layout type can also be specified in PeopleCode. See Layout for more information.

Display Options

Field or Control

Definition

Invisible

Select to make the grid or scroll area and its associated fields and records invisible. Use this setting for work grids or scrolls for which you want the underlying processing to be transparent to users. Typically, you associate invisible work grids and scrolls with PeopleCode Scroll functions that enable you to further control application processing.

Display Only

In some cases, you might design grids that enable users to view but not change information. Select this check box if you do not want the user to enter data into the fields in any of the rows.

Odd/Even Row Style

Selected by default, this attribute displays the grid with contrasting colors by row. The Odd Row Style and Even Row Style drop-down list box options appear instead of the single Row Style option in the Row Styles group box.

Show Column When Cells Hidden

Select if you want the columns to appear even if all of the cells in a column are hidden. Columns do not collapse.

Fixed Height (number of rows)

Select to set the grid to a height corresponding to the number of rows in the occurs count attribute. The grid remains fixed at that height even if the actual number of data rows varies from that number. If the fixed height property is not used, the size of the grid dynamically changes based on the occurs count and the number of data rows retrieved.

Enable View All Columns

Displays an expand all button to the right of a tabbed grid, enabling the user to view all columns of the grid by scrolling to the right using the horizontal scroll bar of the browser instead of selecting the grid tabs. The Show Grid Tab button appears when columns are expanded to enable the user to view the tabs again.

Disable Display in Modal Window

Select to disable the zoom capability of the grid.

Disable Row Highlighting

Select to disable grid row highlighting.

By default, when an end user hovers the mouse over a row or selects the row, the system highlights that row to indicate it is the row of current focus. However, highlighting can be distracting or unnecessary for some interfaces for varying reasons, such as the form factor of the device displaying the page.

Collapsible Data Area

Select to collapse the data area for your grid or scroll area into a header bar with a small image that the user must click to activate or expand it. Selecting this option enables the Default Initial View to Expanded State check box. You can then select the label image to represent the collapsed and expanded states.

Image: Expanded scroll area

This example illustrates the fields and controls on the Expanded scroll area. You can find definitions for the fields and controls later on this page.

Expanded scroll area

Image: Collapsed scroll area

This example illustrates the fields and controls on the Collapsed scroll area. You can find definitions for the fields and controls later on this page.

Collapsed scroll area