Working with Other Page Controls

Lazy scrolling provides the ability for the PeopleSoft application to dynamically load grid content as the end user scrolls downward. Rather than loading all content up front, which would degrade performance, the fluid application loads the content as needed. The fluid application loads the next set of scrollable content automatically as the user reaches the end of the currently displayed content. The fluid application displays the total row count for the grid on the same line as the grid title.

To enable lazy scrolling:

1. On the Grid Properties > General tab, set the Occurs Count to the number rows to be sent to the browser when the grid appears initially.

   Note: Make sure Unlimited Occurs Count (rows) is not selected.

2. On the Label tab, in the Header Navigation Bar Properties for that grid, make sure the Invisible option is clear for these property tabs:

   • Previous

   • Next

   • View All

3. On the Use tab, in the Grid Style group box, select the Vertical check box.

You can add container group boxes to organize grid columns into "hotspots," or clickable areas. Then, you add a hidden trigger field (a hyperlink or push button) to each group box to define the hotspot's action.

To create multiple clickable hotspots in grid rows:

1. Within the grid, insert a group box before the grid columns to be included within that hotspot.

   1. On the Fluid tab of the group box's properties, set the type to Container or Default.

   2. Also, select the Capture Trigger check box.

2. Within that group box, insert a push button/hyperlink control:

   Note: The order of this trigger control within the group box does not matter.

   1. On the Type tab, ensure that the destination is PeopleCode Command.

   2. On the Use tab, select the Execute PC on Row/Group Click check box.

   3. On the Fluid tab, stylistically hide the control using psc_hidden.

3. Ensure that all visible columns within the hotspot are set to display only and are not interactive.

4. Repeat steps 1 through 3 for each hotspot within the grid.

When working with scroll areas, the relevant, common fluid properties apply, but you can also set these properties:

When working with edit boxes and long edit boxes, the relevant, common fluid properties apply, but also you can set these properties:

Using subpages can help to reduce clutter on the main or primary fluid page, and they clearly separate related fields into separate entities. In addition, they enable you to segregate business logic into separate, reusable modules.

When using subpages, you will notice that the footprint is small in terms of the space they consume on the page that includes the subpage. Every subpage control must be enclosed by a group box on the primary page where the subpage has been included.

Finally, subpages can be nested—that is, one subpage can include a subpage control for another subpage, and so on.

Similar to classic secondary pages, use secondary pages in fluid applications to:

• Reduce clutter of the main or primary fluid page.

• Display ancillary information in a separate modal window.

• Provide a data entry area for secondary or supplemental information.

Unlike classic secondary pages, fluid secondary pages must always be displayed in a modal window. When creating a fluid secondary page:

1. Select Page (Fluid) as the definition type in Application Designer.

2. Select PSL_APPS_CONTENT as the layout page.

   Note: Creating your page in this manner applies the ps_apps_content style to the outermost group box container on the page.

3. On the Use tab of the Page Properties dialog box, set the Page Type to Secondary Page.

4. On the Use tab, determine whether to retain settings for PeopleTools-produced buttons:

   Important! Do not select the Disable Display in Modal Window When Not Launched by DoModal Peoplecode check box for fluid secondary pages. Fluid secondary pages must always be displayed in a modal window.

   • Deselect the OK & Cancel buttons check box if you plan to add custom button definitions directly to the secondary page definition.

     Note: On fluid modal secondary windows, the OK button is actually rendered with the label Done.

   • Deselect the Close Box check box when the OK & Cancel buttons check box is selected or when you plan to add a custom Cancel button directly to the secondary page definition.

     This item renders an X in the upper left corner of the modal window that can be used to cancel and close the window.

5. Set an appropriate minimum size for the modal window for each form factor, which is inclusive of its title bar. Specify a size that is neither too small nor too large for the content you are displaying in the modal window. Otherwise, the modal window will be rendered incorrectly, sometimes with scroll bars and sometimes not.

   Oracle recommends that you use styles to set the minimum size for the modal window. Specify styles on the Fluid tab of the Page Properties dialog box.

   For example, page-secmin30x25em sets the minimum size to 30 ems wide by 25 ems tall:

   

   Typically, modal windows on small form factor devices should occupy the full screen. Therefore, no style override was specified in the preceding example.

   Note: You will encounter some Oracle-delivered fluid applications that set width and height in PeopleCode using modal options. Nevertheless, the recommended approach is to use styles as stated here.

6. Add page Activate PeopleCode to set the viewport for this secondary page.

   Setting the viewport for each fluid component and secondary page ensures that your fluid applications operate properly across all device types, particularly on small form factor devices such as smartphones. The recommended methodology is to use the SetDefaultViewport method:

   import PT_PAGE_UTILS:*;
   (create PT_PAGE_UTILS:Utils()).SetDefaultViewport();

In general, HTML areas should be used sparingly, if at all, with fluid applications. If used, keep these guidelines in mind:

• Select the HTML Tags Only option on the HTML tab of the HTML Area Properties dialog box for performance reasons. This limits the processing and parsing tasks that the system needs to perform, especially in the case of large grids containing numerous input fields.

• Do not reference external JavaScript or external style sheets in the HTML area.

With check boxes on a fluid page, there are differences based on the Control Structure settings on the Check Box Properties > Fluid tab.

The default (Advanced) shows the actual translate values (On/Off, Active/Inactive, whatever they happen to be). With Basic selected, the system shows just a check box, similar to classic rendering.

Label positioning can be important with these options, as you typically want labels to appear after a standard check box but before the control with the Advanced option selected.

This example illustrates the differences in rendering and label placement of the Advanced and Basic Control Structure settings for check boxes. The Advanced selection shows the toggle switch, while the Basic selection displays a more standard check box.

In addition to the existing push buttons types used in classic applications, these toolbar action types are available for use in fluid applications only: Back, Clear Prompt, Help Link, Home, IN Prompt, Logout, Nav Bar, New Window, Search, Search Cancel, and SUOW Save.

You can create tool bars containing push buttons that appear in custom locations, such as sidebars for example, using your own actions, if needed. Push buttons are not required to appear only in the toolbar at the top of the page. Options that can be found on the Use tab that may also be of interest for fluid pages include:

• Execute PC on Row\Group click: Runs PeopleCode as soon as user clicks on row\group).

• Execute SearchSave Event: When a user runs a search, the system saves the page data prior to running the search so it is not lost. This option applies only to the search button, not every button on the page.

import PT_PAGE_UTILS:*;

Local boolean &bState = (create PT_PAGE_UTILS:Utils()).ToggleButtonState(GetField());
/* Do additional processing associated with the toggle button. */

Static controls can be used for fluid pages. They have a different structure than what you see on classic pages, and you can apply style classes to these page elements (to the outer wrapper as with all other controls).

This example illustrates the static text control represented in the generated HTML for a fluid page.

This example illustrates the static image control represented in the generated HTML for a fluid page.

The horizontal rule control can be used and you can apply a style on the Horizontal Rule Properties > Fluid tab to be applied to the horizontal rule. Styles are applied at the ps_box-hr level (as with all controls, styles applied in Application Designer are found in the outer wrapper of the control).

When inserting charts onto a fluid page, note that there is no Fluid tab on the Chart Properties dialog box. The properties applied to a chart on a fluid page are applied using the Fluid tab of the chart container (the group box surrounding the chart.)

For more information, see Fluid Mode Considerations for Charts and Gauges.

You can create a pop-up menu on a fluid page with menu items performing any action or navigation. Fluid pop-up menus can contain only a single level of menu items. Using the page controls and techniques described in this section will create pop-up menus that are rendered, styled, and tagged to standards that work with assistive technology.

The following example illustrates a fluid pop-up menu:

A fluid pop-up menu is not a separate, distinct page control found in Application Designer. Instead, you can use several methodologies to create fluid pop-up menus, including a parent group box (described here), a hyperlink or button, and others. The procedure described here relies on a parent group box of type Popup to serve as the button to activate the pop-up menu. This procedure requires no further coding by you to create a control and menu that is generated to standards that work with assistive technology. In addition to the parent Popup group box, you can use one of three methods to create the pop-up menu:

• A group box of type Menu. Each menu item is a hyperlink contained within a group box of type Menu Item.

• A grid with a layout of Menu Grid Layout. Each row in the grid is a menu item.

• A scroll area with a layout of Menu. Each row in the scroll is a menu item.

To create a fluid pop-up menu:

1. Create a parent group box of type Popup to serve as the button to activate the pop-up menu:

   • On the Label tab, specify a text label for this button.

   • On the Use tab, specify an image for this button if applicable.

   • On the Fluid tab: Specify any additional styles for this button—for example, psc_image_only.

   • On the Fluid tab: Oracle recommends that you enable a vertical scroll bar for this menu; whether a vertical scroll bar is displayed depends on how the page is displayed (in a modal window, for example) and form factor usage (smart phone, for example).

   • Using the SetGroupletMOptions PeopleCode built-in function, set modal popup options enabling bPopupMenu on the record field. For example:

     MY_RECORD.POPUP_MENU_GBX.SetGroupletMOptions("bPopupMenu@1;");
     

     Note: When bPopupMenu is enabled (set to 1), the system will automatically set bHeader to 0 (disabled), bAutoClose to 1 (enabled), bMask to 1 (enabled), and sMaskStyle to ps_masktrans; these options cannot be overridden. In addition, bVertical will be set to 1 (which is recommended), but it can be overridden.

2. Within the popup group box, create the menu container using one of three options:

   • To create a static menu, use a group box of type Menu.

   • To create a dynamic menu, use a grid with a layout of Menu Grid Layout.

   • Alternatively, use a scroll area with a layout of Menu to create a dynamic menu.

3. Define menu items within the menu container depending on the option selected in step 2:

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

   • If the menu 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 menu item.

   • Alternatively, if the menu container is a grid or a scroll area, you can also create a grouping of columns to be acted upon as a single menu item: 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 menu item, and any additional controls such as images or counters (badges) to adorn the menu item.

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:

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.

The following page controls are not supported in fluid applications:

• Embedded help in grids, scroll areas, and group boxes.

• Frames – Use a group box of type Layout instead.

• Pop-up menus – The use of the classic pop-up menu page control can produce unpredictable results with other aspects of fluid applications. Pop-up menus on fluid pages are created in a different manner.

  See Creating Fluid Pop-up Menus.

• Pop-up pages – Mouse-over pop-up pages are not supported in fluid applications.

• Scroll bars.

• Trees.