Monday, April 17, 2017

Fluid UI - Tile Wizard API - Part 3 - Dynamic Tile Style

This is a continuation of the Fluid UI - Tile Wizard API series: Part 1 and Part 2. In this part, we will explore the Tile Wizard API further to dynamically style tiles and more importantly find an option to target specific tiles to apply custom style classes.

In the past (refer Fluid UI - Styling Tiles - Part 1 and Part 2), I wrote about the challenges with the way the id attribute is auto-generated in the tile html (div elements).

E.g.: In the screenshot below, the div element for the 'Financial Account' Tile in the Student Homepage has an id attribute value of win0divPTNUI_LAND_REC_GROUPLET$2.


The number 2 in the id attribute value denotes that it is the third (starting with 0) tile on the Homepage. This auto numbered id value is still unique enough to target the elements under this div and apply custom styles using css selectors (e.g.: make the 'Financial Account' tile title appear in red color, etc.). But this assumes that the end users or even the administrators will not change the order of the tiles either via Personalizations or via administrative pages (structure and content). If such events occur, then it would be a bit complex to apply a style class targeted to a specific tile. This was the main reason I created an Idea on My Oracle Support to request this ability as a PeopleTools enhancement.

With this background, I got really excited when I saw that we could potentially use the Tile Wizard API for applying targeted styles to a tile using the TileID and the TileSpecificStyleSheet properties of the Tile Wizard Class.

Environment Details:
- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

TileID Property Quirk:

But first, I found some quirky behavior with the TileID property. When I tried to set the TileID for the custom tile 'My Team' which I created in Part 2, it did not really update the id attribute on any of the elements that are part of the Tile. Instead the value was added to the class of the Tile Content area. This appears to be a bug from my understanding. If you are finding different results then please leave a comment with your experience!

PeopleCode:



We can see that the id attribute of the tile - where we would have expected the update - is still unchanged, whereas strangely the value is added to the class of the Tile Content area. Bug?

Using the TileSpecificStyleSheet Property:

While it is evident with the name of this property that it is specific to a tile, it does not necessarily mean that it will only be applied to the target tile. Basically, the style sheet is added to the response which may or may not be specific to the target tile depending on the style class selectors in the style sheet.

Let us say we added a custom style sheet to the 'My Team' tile using the TileSpecificStyleSheet property.


Scenario 1:

Let us add the following style to the freeform style sheet to set a different color to the Tile Title.

SV_TILE_CSS Style Sheet:


Results:

We can see that all the tiles on the homepage are affected by this style class. This is because the style class does not have any targeted css selectors and therefore will be applied to all tiles on the homepage.


Scenario 2:

Let us add another style - this time specifically targeting the 'My Team' tile using css selectors - to change the color of the Live Data text.

SV_TILE_CSS Style Sheet:


Results:


Overall, while there are workarounds, it would be great if the TileID property works as expected (perhaps in the future releases of PeopleTools?) which would allow us to easily write custom style classes to accurately and effectively target specific tiles.

12 comments:

  1. Hi Sasank,

    Similar to Scenario 2, I had requirement that Image and Text should be displayed dynamic.
    I had image and dynamic text and need to apply for proper variables in custom class...

    I really need your help in this.

    Methods and Variables to be assigned.

    Thanks,
    Prathap

    ReplyDelete
    Replies
    1. Are you running into an issue? I suggest that you go through the Tile Wizard (Part 1, 2 and 3) and use that as a starting point for your implementation.

      Delete
  2. Hello Sasank, can we hide a tile dynamically upon checking a role? If so, can you advise how we can achieve this? Thanks,

    ReplyDelete
    Replies
    1. You may want to take a look at this thread on PeopleSoft General Discussion:

      https://community.oracle.com/thread/4052095

      There are some good ideas including the use of Event Mapping Framework.

      Delete
  3. Hi Sasank, is there any way you could disable the Home Button on Fluid Banner through Peoplecode?

    Thank you!

    ReplyDelete
    Replies
    1. Great question! Sorry for the delay in responding.

      Please review the following blog post:
      https://pe0ples0ft.blogspot.com/2018/03/branding-dynamic-header-icons.html

      Delete
  4. Hi Sasank, I understand you put the TileID = "SV_TILE_ID", but, can we get the TileID for the delivered Tile?

    Thanks!

    ReplyDelete
    Replies
    1. You may need to inspect the elements using Browser developer tools and find the ID of the delivered tile.

      Delete
  5. Hi Sasank,
    Is there a way to hide a tile from a homepage based on the roles or permission list? We have temporary employees and they do not need the Performance tile on Employee Self Service homepage. We have other groups of employees we need to hide tiles to on Manager Self Service as well. What would be the best approach?
    Thanks!

    ReplyDelete
    Replies
    1. Tiles security can be controlled by the security tab on the Tile Content Reference under PeopleTools > Portal > Structure and Content
      Root > Fluid Structure and Content > Fluid Pages

      Find your Tile and administer security appropriately.

      Delete
  6. Hi Sasank,
    Can we configure a search field on the tile. Like the ELM one has for finding learnings and the HR Workcenter has one for FAQs?
    If yes can you please lighlight the implementation steps.

    Thanks
    Vasim

    ReplyDelete
    Replies
    1. This should be possible although I don't have elaborate implementation steps.

      Can you provide more information on where this FAQs tile exists in HR?

      Delete