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.
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.
good work to make PS more interactive.
ReplyDeleteHey Sasank,
ReplyDeletethis is a great idea: we are looking at the gaps between Push Notifications and having an app on your phone that would receive them as they come in. Wondering how the notification framework on some phones would handle the above: Imagine a Web Server that doesn't log you out for a week with PN and the above enabled. Wonder if that would close the gap.
Anyway, the idea here is to reduce the number of times people would need to login to PS to check for workflow.
Hi Simon - Yes. Keeping the web socket alive beyond the normal expiration of the user session is a challenge.
DeleteIt sounds like it may work in theory but I am not sure if there may be other performance/security side effects associated with it.