PeopleSoft Landing Page Modeler

 The Oracle PeopleSoft team have released the first example of the new, PeopleTools 8.62 enabled, Landing Page in HCM Image 053.  This is a pretty significant change in how end-users interact with PeopleSoft.   Think one long, scrollable Homepage instead of multiple Homepages.  There's a dedicated section on PeopleSoftInfo.com just for Landing pages.  This blog is about the new Landing Page Modeler.  A developer aid to modifying the Landing Page design and layout.


PeopleTools 8.61 introduced Sectionalised Homepages and this feature allows grouping of Tiles into Sections and I wrote about this in 2024 when Tile Sections were first made available .

Landing Pages build on this concept.  If you can group Tiles on Homepage within a Section then you can style the section to change it's appearance, position and behaviour.   And how do we style things in HTML?  We use CSS.

The PeopleTools team have published a 50 page Technical Briefing (MOS Doc ID 3107003.1 ) to explain the Landing Page concept and how to make changes to the Landing Pages.  

When I was browsing the 8.62 Patches & Updates for PeopleTools 8.62 I noticed Patch 38578165: PEOPLESOFT LANDING PAGE MODELER UTILITY.   This is also mentioned in the Doc ID 3107003.1.  

This is not a patch to PeopleTools but a Chromium Browser Extension designed to assist a CSS developer make and test changes to the Landing Pages.

Here's a quick guide on how to setup and use it.

1) Download and unzip patch 38578165 file HomepageStyler-20251017.zip 

2) A README.txt file explains how to install and some basic usage instructions so I won't repeat these here.

4) Login to PeopleSoft PIA and navigate to your PeopleSoft Landing Page

5) Open the Modeler extension 

6) Any changes you make in the Modeler a reflected immediately in the browser window.  However, they are not permanent. They are just modifying the styles in the visible window and are not made permanent until you make the changes in Structure & Content.

7) I recorded a short video to show some simple examples of this.


A few things to note:

  • This tool is a very useful developer aid to iteratively experiment with changes in real-time without keep having to go in and out of Structure and Content manually editing and saving Style configuration.
  • When you're ready to implement your changes just click the Show Changes button and it will show you the Original (Old) and New Style changes 

    Example of Show Changes

Here's another simple example of changing the background colour of the Quick Access Section to have a background colour of red.





 




Comments