Portal - General Settings - Navigation Options

If we login to a Campus Solutions 9.2 PUM image (CS 9.2 PUM 4 in my example), we will notice that we have the old left hand navigation menu for the Classic pages even though we are using PeopleTools 8.55+.

How is this available only in Campus Solutions and not in other application pillars?

This is because of the Navigation Options - Type setting under PeopleTools > Portal > General Settings which is set up differently in Campus Solutions. If we want to enable the left hand menu navigation then we can set it to 'Left'. If we want to disable it, then we can set it to 'Drop-down'.

LinkedIn-style Smart Notifications in PeopleSoft: Integrating FavIcon and Page Title with Push Notifications

As part of the latest wave of changes that were done to the LinkedIn UI, I noticed that they also made a change to their FavIcon. The FavIcon alerts us if there is a new notification. Of course, the Page Title also shows us the number of new notifications similar to most modern websites (Twitter, Facebook, etc.). This is great feature especially when we are off "working" on other browser tabs to grab our attention.

Push Notification Framework has been part of PeopleSoft since PeopleTools 8.54 release. So, why not integrate the FavIcon and the Page Title with Push Notifications? This will help the users to return to their work if they receive a notification. Perhaps a UX/UI productivity feature?

Demo:

Here is a demo of how we can subscribe to the Push Notification events and dynamically update the FavIcon and the Page Title.

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

Step 1: Create a Custom FavIcon in Classic and Fluid

I wrote about this topic in the past (as part of my Branding articles). Currently, there is no delivered option to use a custom FavIcon in Classic and Fluid consistently.

Refer: Overriding FavIcon

Related Posts and Reference Documents:
PeopleTools 8.55+ - Using Oracle JET Series: Part 1, Part 2, Part 3 and Part 4
Global JavaScript Injection Framework
My Oracle Support > E-PIA: Does PeopleSoft Use Favicon ? (Doc ID 1226503.1)
My Oracle Support > E:FLUID- How To Access Favicon On Fluid Landing Pages? (Doc ID 2004996.1)

Step 2: Create a custom JavasScript to Subscribe to Push Notifications

JavaScript Object: CSK_SUB_PN_JS


Notes:

The script contains three main parts
- cskSmartFavIcon function takes care of replacing the custom FavIcon with an alternative custom alert FavIcon. It also takes care of pre-pending the Page Title with the notification counter in (n) format.
- The Push Notifications - Subscribe function is used to subscribe to the desired Push Notifications events.
- Finally, cskFavIconPNJS function (called from PTPN_NOTIFICATION_MSG_JS > DoNotify function) takes care of toggling the FavIcon and the Page Title when the user has clicked on the Notification Icon.

Step 3: Inject CSK_SUB_PN_JS globally across the application

As mentioned in reference documents in Step 1, I used my custom framework to inject CSK_SUB_PN_JS globally.

Step 4: Update delivered JS - PTPN_NOTIFICATION_MSG_JS

This will take care of toggling the FavIcon and resetting the Page Title when the user clicks on the Notification Icon.

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.

Fluid UI - Tile Wizard API - Part 2 - Dynamic Tile Images

This post is a continuation of my previous article on the Tile Wizard API, where I described how we can use the Tile Wizard API to dynamically update the Tile Content.

In this post, we will see how we can use the Tile Wizard API for another similar and more common use case to display a dynamic image based on certain conditions.

For the purposes of this post, let us assume that we want to create a Tile called 'My Team' that displays a different image and live data based on the user's security role assignment.

Demo:

Tile Wizard Setup:

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile

App Package PeopleCode Implementation:

PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class TILE_2 extends PTGP_APPCLASS_TILE:Tiles:Tile
   method TILE_2();
   method getTileLiveData();
end-class;

method TILE_2
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
  
   If IsUserInRole("SV_CSK") Then
      rem %This.setTileImageRef("SV_CSK"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_CSK;
      /* Live Data */
      %This.TileLiveData_1 = "Chennai Super Kings";
   End-If;
  
   If IsUserInRole("SV_RCB") Then
      rem %This.setTileImageRef("SV_RCB"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_RCB;
      /* Live Data */
      %This.TileLiveData_1 = "Royal Challengers Bangalore";
   End-If;
  
end-method;

Fluid UI - Tile Wizard API for Dynamic Tile Content

PeopleTools 8.55 introduced the Tile Wizard App Classes which enable us to use the API to dynamically modify Tile Content.

PeopleBooks: Tile Wizard Classes

There are three main areas in the Tile where we can add dynamic content - Tile Content, Live Data and Badge.

Here is an example of how we can use the Tile Wizard Classes to dynamically update the content of a Tile as shown in the example below.

Step 1: Implement a custom App Class that extends PTGP_APPCLASS_TILE:Tiles:Tile

Notes:
- Make sure the App Package contains a Sub Package. Otherwise, we might run into errors as stated in this HEUG Technical Forum discussion.
- We can use the %This.SetTileContentAs... methods - %This.SetTileContentAsTwoKPIs() in this case - to override the "Tile Content Type" configured using the Tile Wizard (which we will perform in step 2).
- We can also use the various Tile Class Properties to set the Tile Content (e.g.: KPI values and labels), Live Data (values, trend image and metrics formatting) and Badge Data.

Step 2: Create Tile using Tile Wizard

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile

Notes:
- We can see that the App Class created in step 1 is referenced as the Data Source.
- Also, the "Tile Content Type" is set to Image in the Wizard configuration level (although it will be overwritten using PeopleCode).
- Similarly, the "Tile Badge" is set to "No" in the Wizard configuration but it can be overwritten using PeopleCode.

Note:
- For the purposes of this example, I set the Target Page to "PS Unit". This can be set to anything as per our requirement.

Note:
- The Tile image is set to PTFP_DEFAULT_CLOUD as a dummy. It will not be used in this case, because we will be overriding the "Tile Content Type" via PeopleCode.

Step 3: Add Tile to a Fluid Homepage

Fluid Home > Action Menu > Personalize Homepage

Results:

Environment Details:

- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

Related Posts:
Part 2
Part 3

PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class TILE_1 extends PTGP_APPCLASS_TILE:Tiles:Tile
   method TILE_1();
   method getTileLiveData();
end-class;

method TILE_1
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
  
   %This.SetTileContentAsTwoKPIs();
   /* 1 KPI tile content */
   %This.TileKPI_1 = %This.getAmountFormattedValue(1.23456789, "USD");
   %This.TileKPI_1_Label = "KPI1_1 Label";
   %This.TileKPI_2 = "KPI_2";
   %This.TileKPI_2_Label = "KPI_2 Label";
  
   /* Live Data */
   %This.TileLiveData_1 = "LD_1";
   %This.TileLiveData_2 = "LD_2";
   %This.TileLiveData_3 = "LD_3";
  
   /* A trend arrow is an optional element of live data. */
   %This.hasLivedataTrendImage = True;
   %This.TrendImage = %This.k_strTrendDownImage;
  
   /* Metrics Formatting */
   %This.isTileLiveData_1_Metrics = True;
   rem %This.isTileLiveData_2_Metrics = True;
   rem %This.isTileLiveData_3_Metrics = True;
  
   /* Badge */
   %This.hasLiveDataCount = True;
   %This.TileTransCount = 7;
  
end-method;