Event Mapping on Fluid Homepage

I regularly get questions on how we can make changes to Tiles on the Homepage dynamically:

• Display/hide Tiles based on certain conditions
• Use different Tile title/content based on certain conditions
• Dynamic Tile content could be achieved using the Tile Wizard Classes.
  
• And so on...

And every time I struggle to remember and find this reference to an old Oracle community discussion:
https://community.oracle.com/tech/apps-infra/discussion/4052095/hide-fluid-tile-from-a-homepage

Just to avoid searching for this again, I am sharing/documenting this link on my blog. 😇

On this thread, Divesh Gupta shared an idea to use Event Mapping on the Fluid Homepage to dynamically display/hide Tiles.
Component: PT_LANDINGPAGE.GBL
CREF: Fluid Structure Content > Fluid Pages > PeopleSoft Applications > Fluid Home

This is a brilliant idea which could be extended for many use cases. It opens up the door for all sorts of dynamic customizations (without the overhead of a customized object). I refer to this on several occasions and hope you find it useful!

Also, be on the look out for a new feature that is planned for PeopleTools 8.59!
Refer: PeopleSoft Planned Features and Enhancements (Doc ID 1966243.2) > Technology (Tab) > Hiding or Displaying Tiles Using an Application Class

Fluid UI - Custom Development - Styling Tiles - Part II

I previously described, in this blog post, how I ran into an issue with a Fluid tile and needed a way to apply some custom style overrides on the tile image.

In the same vein, a reader asked a question on this post, if there is a way to apply similar style overrides on the tile title? We should be able to follow a similar approach to achieve something like that.

This question proves that there is definitely a case to enhance the Fluid tile configuration to allow us to apply style overrides. If you agree, then please take a moment to vote for this Idea on My Oracle Support Community.

Here are the steps to target a tile title and apply custom style overrides:

Step 1: Identify the id of the tile title

All tile title elements will have a unique id property as follows PTNUI_LAND_REC_GROUPLET_LBL$29. Here 29 is the number that uniquely identifies my tile title.

Step 2: Apply custom style override

I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details. 


Note: We can adjust the margin property as per the custom requirement.

Results:

Considering Small Form Factor:

When I said the id property is unique, I was not 100% accurate. It appears that it may vary depending on the form factor we are on. It is mostly true that the id property will be unique but if we are on small form factor (SFF), then it is likely that there may be other tiles that are suppressed. This suppression of tiles on SFF causes renumbering of tile id properties. There is nothing we can do about it because it is how PeopleSoft generates the HTML for the tiles.

That said, we could identify the SFF id property for the tile and write RWD - Media Query to supplement the CSS that I previously described.

Step 3: Identify the id property for SFF

In my case, it turned out to be PTNUI_LAND_REC_GROUPLET_LBL$23.

Step 4: Add media query for SFF

Again, I simply appended to my existing CSS that I used in step 2.


Results: