Understanding Advanced Sectionalized Homepage Development

PeopleTools 8.62 provides flexibility to design the layout of homepages and dashboards, which enables you to modernize the look and feel of the homepages and dashboards. Customers and application developers have greater control over the layout and styling of homepages, dashboards, sections, and tiles.

The foundation of advanced sectionalized homepage development is the sectionalized homepages and dashboards that were introduced in PeopleTools 8.61. The PIA pages that you have been using to create sectionalized homepages and dashboards can be used for the advanced sectionalized homepages and dashboards.

Important! The development of advanced sectionalized homepage is supported only on sectionalized homepages or dashboards. It is not supported for non-sectionalized areas of a homepage or dashboard. If it is used outside a sectionalized area, it may produce undesired results. Moreover, you cannot have a mix of sectionalized and non-sectionalized areas on advanced sectionalized homepages or dashboards.

The portal-like look and feel for homepage or dashboard is implemented at the homepage styling level and is called psc_hpmodel-A. To implement it, you must apply this style for homepages and dashboards through the content reference attribute of PS_STYLECLASSES. It is important to apply the style because all other styles and CSS variables work only in conjunction with this new style. It is important that the Uses Custom Layout check box is also enabled when applying psc_hpmodel-A on the homepage or dashboard content reference (CREF). Otherwise, some layout issues may occur on small form factor. More information on this style and usage of CSS variables is discussed in later topics.

Oracle recommends that you must be familiar with the following CSS concepts to design the layout of advanced sectionalized homepages:

  • Custom CSS Variables and Properties.

  • CSS Grid and Subgrid Layouts.

  • CSS Containers and Container Queries.

  • Nested CSS Syntax.

The advanced sectionalized homepages and dashboards can contain sections, which are populated with tiles that are statically defined as content references (CREFs) and dynamic tiles, that is, tiles dynamically created and loaded into the associated section through the delivered PeopleCode class and methods. Oracle recommends that application developers create sections and tiles implementing the layout and styling that is delivered in PeopleTools 8.62 for the advanced sectionalized homepages or dashboards. It is also recommended that application developers create section templates with default styling and then import them into homepages or dashboards and apply specific styling as required for a homepage or dashboard.

If you plan to use tiles developed in previous releases in the advanced sectionalized homepages or dashboards, you must ensure that you implement the grouplet-based styling on these tiles as delivered in PeopleTools 8.62. For more information on grouplet-based styling, see Grouplet-Based Tile Styling.

The following screenshot is a sample of the advanced sectionalized homepage displaying the varied layouts of sections and different presentations of tiles.

Sample of advanced sectionalized homepage with sections and tiles

 Homepage with sections and tiles

This topic discusses the following:

  • Configure the advanced sectionalized homepages and dashboards.

  • Apply styles from the delivered style sheets.

  • Use CSS variables for the styling of advanced sectionalized homepages and dashboards.

  • Design sections and tiles.

  • Design PeopleSoft landing page.

  • Apply guidelines for merging of homepages and sections in a cluster.