Sunday, April 23, 2017

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.


1 comment: