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:

Fluid UI - Custom Development - Styling Tiles

In this post, I will write about how we can style any custom tiles that we might be creating for Fluid UI.

Why would we want to do that?

I created a custom Fluid component/page and created a Fluid Content Reference.

Now my icon¹ image (CSK_CC_SCAN) for my custom tile ended up as follows:

Notice how the icon is not position appropriately? Sure, I can create an image with the desired alignment and spacing. But wouldn't it be better to just adjust the style on the tile image to add some alignment/margin properties?

If you see the Content Reference - Fluid Attributes - Tile Information, there is no way to assign a custom style to the Tile.

How do we associate styles to custom tiles?

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.


CSK_CC_SCAN$30 is the id attribute generated on the HTML for my custom tile.

Now, we can see the results from the image above that my custom tile icon is displayed in the desired position with a top margin of 25px.

If you think this would be a good feature to add to the 'Fluid Content Reference - Tile Information' section, then please vote for this idea on My Oracle Support.

¹ - Icon made by Freepik from www.flaticon.com