Creating Fluid Pages
The fluid primary page is the main content page, or target page. The primary page is used directly within the component and is not modal (unless used in the context of DoModalComponentPopup).
The main fluid page is the main content area, or target page. The main page is used directly within the component.
To create a new main fluid page based on an existing layout template:
In Application Designer, select File, New.
Select Page (Fluid) in the New Definition dialog box, and click OK.
Select an initial layout page (template) from the Choose Layout Page and click Choose.
Note: Most main fluid pages are based on the PSL_APPS_CONTENT layout page.
Enter the page name in the Save As dialog box.
Indicate whether you’d like to save the PeopleCode associated with the layout page for your new page (Yes/No).
Note: Typically, click Yes to include any PeopleCode from the layout page.
Define layout and add page controls according to the fluid techniques and guidelines described in this documentation.
To create other fluid page types:
In Application Designer, select File, New.
Select Page (Fluid) in the New Definition dialog box, and click OK.
Select an initial layout page (template) from the Choose Layout Page that corresponds to the page type that you want to create—for example, select PSL_SIMPLE_SBP to create a fluid subpage.
Click Choose and enter the page name in the Save As dialog box.
Indicate whether you’d like to save the PeopleCode associated with the layout page for your new page (Yes/No).
Note: Typically, click Yes to include any PeopleCode from the layout page.
Open the Page Properties dialog box.
On the Use tab, select the page type—for example, select Subpage to create a fluid subpage.
Define layout and add page controls according to the fluid techniques and guidelines described in this documentation.
This section describes the layout pages you can use as the basis for any new fluid pages. Layout pages can be compared to templates. They provide a basic structure to get you started with a fluid page.
Important! Do not include a layout page in any component definition. Layout pages are templates only for the generation of a new fluid page definition.
Image: Choose Layout Page Dialog Box
This example illustrates the layout page options provided by the Choose Layout Page dialog box.
In your new page definition, you may add or remove elements as needed for your purposes. However, make sure to examine the template pages so that you understand how any existing PeopleCode or CSS styles affect the interface.
Important! Not all of the delivered layout pages are intended for external usage.
Recommended Layout Pages
This table describes the layout pages suitable for fluid application development.
|
Layout Page |
Description |
|---|---|
|
PSL_APPS_CONTENT |
Use PSL_APPS_CONTENT as the basis for most main fluid pages of type Standard or Secondary. This layout page contains the outermost group box to act as the overall container for the fluid page content. This group box has the ps_apps_content style applied, which provides the outer flexbox necessary for all fluid applications. |
|
PSL_2COLUMN_FLOAT |
This layout page contains nested layout group boxes inside of the outermost group box that has the ps_apps_content style applied. If you’re using this layout page, you need to supply the styling for the child containers based on your needs. |
|
PSL_CONTENT_TITLE |
This layout page includes a special Page Title group box to display a page title on the page. Use this layout page for pages that are displayed inside two-panel wrappers such as activity guides or master/detail components. |
|
PSL_PANEL_CONTENT |
This layout page includes a single container having the default styling for the side panel (left or right panel) usage. If you’re using this template, you also need to specify your own record/field and make sure the appropriate role (ARIA) is applied to the outer container for accessibility. |
|
PSL_PANEL_NAV |
Left (typically) panel usage to contain navigational elements, which control the target page content. Role (ARIA) automatically applied to indicate that the contents will be navigational in nature. |
|
PSL_SIMPLE_SBP |
Use PSL_SIMPLE_SBP as the basis for fluid subpages. Note: After creating a subpage from this layout template, you must change the page type from Standard to Subpage. See Selecting Page Types. |
|
PSL_TWOPANEL |
Used in PeopleTools 8.54 to provide a two-panel layout, typically with navigation on the left side and the transaction page on the right. |
|
PSL_USER_PREF |
Use this layout page for creating user preferences to be included as part of My Preferences. |
|
PSL_USER_PREF_FT |
Use this layout page for creating a footer page for user preferences. |
Layout Pages Reserved for Internal Usage
These layout page types are reserved for internal usage by Oracle development teams:
PSL_2BY2
PSL_BOUNDING_BOX
PSL_FILTER_RESULTS
PTPG_GRIDVIEWERNUI
PTPG_NUI_VWR
PTPN_SEEALL
PT_LANDINGPAGE
When you’re evaluating whether to convert your existing custom classic applications to fluid, you should consider these questions:
Will the application be used on smart phones and tablets as well as laptops and desktop computers, thereby taking advantage of the responsive and adaptive nature of fluid applications across all form factors?
Will the application benefit from easy access via a tile on a homepage or dashboard?
Or, if the application is administrative in nature, would it benefit from a simpler reworking to make it classic plus, but consequently foregoing the responsive and adaptive nature of fluid applications?
Then, consider these implementation approaches:
For applications that do not require all of the benefits of the responsive and adaptive nature of fluid applications, rework the classic pages to classic plus.
For simple classic applications with a simple page structure and few page controls, create a new fluid component and page, and then copy all of the existing classic page controls into the new fluid page.
For more complex classic applications with complex page structure, consider starting anew by redesigning the pages as a fluid application, taking full advantage of all fluid page design features.