Push Notifications - Disabling the Notification Badge

I saw a question on a forum where someone wanted to disable the push notifications badge from showing the incremental counter.

What is the Notification Badge? It is the counter on the notification icon which indicates any new notifications that were pushed to the client/users.

Why would we want to disable this? Yes, that is a good question. It is hard enough to setup and ensure that Push Notifications is functional, so I would not touch anything if you ever get the badge to increment properly! 😉

That aside, let's say we have a valid reason to remove the counter. Maybe we decided to not interrupt our users and just let them view their notifications on their own accord (i.e., the next time they make a request to the server).

My first thought was that we could simply disable this at the app server configuration level.
PeopleBooks: Configuring an App Server Domain for Push Notifications 

However, this would only stop the server from sending 'push' notifications to the client using WebSockets. This would not stop the counter from displaying when the client/users initiate a request (such as initial login and subsequent actions within the application).

Note: In PeopleTools 8.58, the web profile custom property EnablePNSubscriptions is no longer used. Refer: Understanding Push Notification Configuration

Option 1

Looking for other options, I stumbled upon a PeopleTools Personalization that is new in 8.58.
Refer: Adding PeopleTools Option to Disable and Re-enable Push Notifications

This works great! Easy to setup online (no need to reboot any domains) and effectively stops the notification badge counter from displaying all together. The beauty about this approach is that we could either setup the default option as true or false (i.e., enabled/disabled) at a system level and let users (with appropriate access) to personalize this option via 'My Preferences' at an individual level.

Option 2

The other idea I had was to simply hide the badge using CSS.

CSS

For the sake of a proof of concept, I made the following update to the delivered CSS object - PSBASE_A_STYLES.

This is another option to achieve the same result at a system level.

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.