Working with Other Page Controls

This section contains an overview and discusses aspects specific to fluid page development with regard to adding page controls.

In general, adding page controls to fluid pages is comparable to adding page controls to a classic page, except for using CSS styles to position the control and the obvious look and feel differences at runtime. The content in the this topic call out key differences with regard to fluid development. You should be well versed in development of classic PeopleSoft applications and all of the various page control options provided by Application Designer prior to beginning a fluid development or customization project.

Setting Grid Label Properties

Fluid grids support these property settings:

  • Row count (n rows).

  • Previous, Next, and View All.

    Combined, these properties enable lazy scrolling on fluid grids; see Enabling Lazy Scrolling for Scrollable Grids for more information. However, unlike classic grids, no separate page controls are displayed for these features.

  • Find.

  • Download to Excel.

  • Personalize.

    This property enables the save sort feature in fluid via the Sort button on fluid grids allowing users to save sorts and remove saved sorts.

However, do not enable save sort (the Personalize property) on a grid if:

  • Grid columns are hidden or shown programmatically.

  • The Show Column When Cells Hidden check box is selected on the grid’s Use tab.

In addition, do not enable save sort on a grid if the page or component includes multiple grids based on the same record except when you implement a common list of grid columns across all grids using this record and you restrict the sort to only those common columns.

These features are not supported and are ignored (if enabled) on fluid grids:

  • Top and Bottom (First and Last links).

  • Row count (x–y of n).

  • Footer.

For more information on setting grid label properties, see Setting Grid Label Properties

Selecting Grid Layout

Fluid grids support these layout options:

  • Data Grid Layout.

  • Div Grid Layout.

  • Flex Grid Layout.

  • List Grid Layout (Ordered).

  • List Grid Layout (Unordered).

  • Menu Grid Layout.

  • Tab Set Grid Layout.

For more information on selecting a grid layout and setting other grid use properties, see Setting Grid Use Properties.

Setting Fluid Properties for Grids

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

Field or Control

Definition
Scroll Sizing by Style

Select to override the system default, automatic scroll container sizing. If you use this option, you must control the scroll container sizing through a custom style. If you select this option, be aware of these items:

  • If the custom style does not control the scroll container size successfully, the scroll may not appear or work as desired.

  • Your custom style must be able to handle window size and orientation change.

  • If there is no overflow amount (data rows exceeding occurs limit), lazy scrolling may not be triggered.
Custom Grid Header

Select to specify a custom grid header.
Include Labels in Grid Cells

Select this option to generate field labels within grid cells when you’re using list grids, div grids, or flex grids with group boxes to group fields, or when you have a tab separator in your grid.

Typically, these are suppressed. But because we have the ability to put group boxes within grids, the labels are appropriate to display what the individual fields are (depending on context).

Note: In some situations, such as when displaying a page on a smart phone, you may want grid scrolling disabled. Add the psc_noscroll style to Small in the Form Factor Style Class Override group box to disable scrolling for that grid on small form factor devices. Do not disable scrolling for lazy scroll grids.

Other Unsupported Grid Features

These grid features are not supported in addition to the grid label features that aren’t supported:

  • Odd/even row styles.

  • Persist in menu.

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.

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

Field or Control

Definition
Layout

Select one of these layout options:

  • Default – Displays the rows of the scroll in the standard, default format.

  • List (Unordered) – Displays the rows of the scroll as a bulleted (unordered) list.

  • List (Ordered) – Displays the rows of the scroll as a numbered (ordered) list.

  • Menu – Use as a container for a pop-up menu.

    See Creating Fluid Pop-up Menus.

  • Tab Set – Use to as a container for a set of sectional tabs embedded on a page.

    See Creating Sectional Tabs on a Page.

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

Field or Control

Definition
Application-Specific Styles: Style Classes

Similar to classic pages, when the character counter is enabled, it is displayed beneath the bottom right corner of the long edit box. If you want the character counter to be displayed beneath the bottom left corner, use the psc_counter-left style. Oracle recommends that you do not use a psc_control-width*pct style to control the width of the long edit box itself because you will then need to develop and apply custom styling to get the character counter aligned with the long edit box.
Place Holder Text

Display default, place holder, text in the edit box as follows:

  • None: Disables the display of place holder text.

  • Static: Select to enable the Static Text box, and enter the desired text.

  • Message Catalog: Select to enable the Message Set/Number boxes. Enter the message set and message number of the message catalog entry that contains the place holder text.

For example, you can add a default value or sample format of the field data to assist users.

HTML example:

<input type="text" id="PS_APP_END_DATE" class="ps-edit" placeholder="Specify the date you expect to finish the assignment." value="" maxlength="10" ...>
Input Properties

Select the expected data type for users to input. This sets the HTML input type parameter.

Setting input types for forms allow for better input control and validation for various data types, including:

  • text

  • date

  • datetime

  • email

  • number

  • range

  • search

  • time

  • url

Note: The Input Properties setting does not apply to long edit boxes.

Note: While display-only rich text fields are supported in fluid applications, editable rich text fields (the rich text editor) are not. If you enable rich text for long edit boxes on fluid pages, then you must also select two check boxes on the Use tab of the Long Edit Box Properties dialog box: Display Only and Expand Field When Display Only.

Note: The Show Label option is not supported for edit boxes on fluid pages.

Note: The Display in Modal Window option is not supported for long edit boxes on fluid pages. Therefore, the character limit counter cannot be displayed for long edit boxes in fluid grids.

Working with Number Fields

When you select number as the Input Type, the system uses an HTML 5 number input which renders in a fashion specific to the browser/device accessing the page. For example, on a touch device the system displays the numeric keyboard when the number field is in focus, and a browser may display a spinner (spin-button) for a number field.

Note: Browser rendering and HTML 5 rendering may change after the publication of this document.

When setting Input Type to number, consider that HTML 5 restricts the data that can be used as input or displayed for number fields to the following set of characters:

  • 0 through 9.

  • - for negative numbers.

  • . for a decimal point.

Adding additional characters (such as a currency symbol, a thousand’s separator, and so on) or additional field formatting is not supported for a field with the Input Type set to number. For example, if you set Input Type to number, the numeric keyboard will be displayed by default for that field on touch devices, however you also introduce the HTML 5 number field character restrictions. In this case, any special characters or formatting applied in Edit Box Properties, field definition formatting, or PeopleCode (such as currency symbols, thousands separators, and so on) will not be displayed or accepted as input for that field.

On the other hand, if you want to allow additional formatting or characters for numerical values, then set the Input Type to text, keeping in mind that with the Input Type set to text you lose the device/browser-specific representation (such as the numeric keyboard for example).

A general recommendation would be that you should only set a field's Input Type to number if the underlying field definition Field Type is set to Number in Application Designer, or if the Field Type is set to Character, you have also set the Format Type to Numbers Only.

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 window.

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

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.

Image: Advanced and Basic Check Box Rendering

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.

Example of the Advanced and Basic check box

In addition to the existing push buttons used in classic applications, these push buttons are available for use with fluid user interface pages.

  • Home

  • Sign Out

  • NavBar

  • Add To

  • Search

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.

Note: For a button to display an image and text (a combination button), on the Label tab, select Both for the Label Type, then specify the Alt tag for image and Label Image.

Note: The Open in New Window and Replace Current Window options on the Push Button/Hyperlink Properties dialog box Use tab are not supported for fluid pages. To open a page in a new window for a fluid page, use PeopleCode, such as ViewURL or ViewContentURL.

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).

Image: Static Text

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

Example of static text in fluid HTML

Image: Static Image

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

Example of static image in fluid HTML

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.

Image: Example of a fluid pop-up menu

The following example illustrates a fluid pop-up menu:

Example of 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.

Image: Example of sectional tabs

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.

The following page controls are not supported in fluid applications:

  • 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.