Tuesday, September 13, 2016

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:


2 comments:

  1. Sasank, when an end user personalizes the tile order, the css fix based on $xx will not work, right? I assume this id generation is based on the position it is rendered on the homepage and not constant for a tile.

    Thanks,
    Madan.

    ReplyDelete
    Replies
    1. Hi Madan - Yes. My method has some shortcomings. You are right. It will not be possible to identify all the different $xx that end up getting created as a result of user personalization (if that is an option for users).

      This is where, I think this idea has merit:
      https://community.oracle.com/ideas/13674

      That said, as a workaround, we will need to find something that is unique for tile and target it using css selectors. But I it does not appear to be an easy task. Potentially, we could use the onClick attribute on the DIV (parent of the SPAN i targeted) which has the URL of the component. Just a thought, I have not tried it to check if it works.

      Hope this helps.

      Delete