Service Portal Notification Preferences Widget

[DScroggins]

As you may (or may not) know, one main item missing from the current Service Portal is a way for end users to manage their Notification & Subscription preferences. Currently the only options around this limitation are to either create a custom widget or to create an iframe which utilizes the Notification Preferences UI page.

Now the latter will only work if you have the system property "glide.notification.preference.ui.enabled" set to false as of Jakarta, Notification Preferences are shown in the System Settings. Setting this property to false will allow you to use the iframe method but it will also change the way all users of the platform manage their preferences i.e they will use the UI page rather than the System Settings.

This has created a major roadblock when we have started the process of moving existing CMS users to the Service Portal as simply changing the System Property was not an option we wanted to entertain. After searching the community for anyone else who has effectively solved this issue I was unable to find any actual solution thus I have created a custom widget which mimics all of the features available for Notification & Subscription Preference management.

The OOB Knowledge Subscription & Notification Preferences widget was used as the base and then new functions were created to use the Notification Preferences API (/api/now/v1/notification/preference). This is the API which is used by the System Settings for notification management. The widget , ng-templates, and a portal page "notification_preferences" are included in the attached XML for your use. Im sure there are improvements which can be made to the widget but hopefully this will help anyone who finds themselves with the same need as I did.

Screenshots

Notifications By Category:

New Personal Notification:

Category Notifications:

Notification Channel Edit:

Notification Channels:

New Channel:

[chiru9]

Hi David, 

Could you share the xml once again. i m not able to import the xml which you have posted.

[DScroggins]

Hello,

This widget can also be download on Share here:

https://developer.servicenow.com/app.do#!/share/contents/8113177_notification_preferences_widget?v=1...

Please note if you are having issue committing the update set double check that you do not already have a widget with id = notification-preferences as that is a unique field and you wont be able to import this update set. 

Please let me know if that is not the case and you are still facing issues and I will be happy to help figure out what is going wrong.

--David

[chiru1]

It working 🙂 Thanks David. Great work

[DScroggins]

Fantastic! Glad that you were able to get it working. Cheers. 🙂

[Aaran Renwick2]

After importing this how does one enable it? 

[DScroggins]

Hi Aaran,

After you import the update set you will have a new widget 'Notification Preferences'. Simply use that widget on any desired page in your Service Portal and users will be able to manage their Notification Preferences. There are no additional steps needed in order to use. Please let me know if you still unable to utilize the widget and Ill be happy to help.

Regards,

David

[Donald Small1]

Thank you for sharing this.  It sounds like it is exactly what I am looking for.  I am going to download it and give it a try!

The ServiceNow Community rocks!

[ryanduclos]

Could someone point me to the documentation for this API? I'm not finding it anywhere.

[Stefan Reichelt]

I'd like to try out this one (seems to be exactly what we need), but I can't import it properly.

It remains in status "commiting", and the page stays empty when I try to add it to the main menu. 

[DScroggins]

Hi Valen,

I've uploaded a new version of the widget which corrects the widget id so it does not interfere with the OOB Customer Service widget that has the same id. Please try with the new version and let me know if it applies without issue.

Link to updated share project

Cheers!

David

[Stefan Reichelt]

Thanks for the quick reaction! I tried it with v1.5 (several times), but I still get the same error message. Am I doing anything wrong?

Best regards,

Valen

[DScroggins]

Please see the following HI KB which describes the issues you are facing:

KB0747590: Commit Called Without Update Set ID - Error encountered in attempting to Commit update se...

The KB states that you most likely have a Business Rule running on the sys_update_set table which is aborting the action. Look to see if you have any custom business rules on that table which are running on insert and have setAbortAction(true). If found disable the business rule then you will be able to commit.

Hope this helps.

--David

[Stefan Reichelt]

Thanks, that helped me further!
Now I just run into 5 errors which are pointing to some duplicate:

One of them (from commit log):

FAILED TRYING TO EXECUTE ON CONNECTION glide.8 (connpid=2293): INSERT INTO sys_metadata (`sys_mod_count`,`sys_updated_on`,`sys_class_name`,`sys_id`,`sys_package`,`sys_update_name`,`sys_updated_by`,`sys_created_on`,`sys_name`,`sys_scope`,`sys_created_by`,`sys_policy`) VALUES(0,'2020-04-14 16:26:11','sp_ng_template','c4d8262b2f001010b7763c96f699b6e2','global','sp_ng_template_c4d8262b2f001010b7763c96f699b6e2','the.dude','2020-04-14 16:26:11','noti_device_base_template','global','the.dude',NULL),INSERT INTO sp_ng_template (`template`,`sys_id`,`id`,`sp_widget`) VALUES('<div class=\"cm-settings-item hidden-sm hidden-xs self-clear\" data-ng-repeat=\"devi in c.notifDevices\">
  <div>
    <div id=\"switch_label_{{devi.sys_id}}\" class=\"col-xs-9 col-sm-6 cm-item-name\">{{devi.name}}
    <button class=\"btn btn-link\" ng-click=\"c.openFormModal(''cmn_notif_device'',devi.sys_id,''Edit Device'')\" aria-haspopup=\"dialog\" role=\"button\">Edit</button>
    </div>
    <div class=\"cm-item-checkbox col-md-2 col-md-offset-4 col-lg-1 col-lg-offset-5\">
      <div class=\"input-switch\" style=\"width:50px;\">
        <input aria-labelledby=\"switch_label_{{devi.sys_id}}\" 
               id=\"switch{{devi.sys_id}}\" 
               type=\"checkbox\" 
               name=\"switch{{devi.sys_id}}\" 
               data-ng-model=\"devi.logical_active\" 
               data-ng-change=\"c.toggleDevices(devi.sys_id,devi.logical_active)\" 
               data-ng-disabled=\"devi.readonly\" >
        <label aria-hidden=\"true\" class=\"switch\" for=\"switch{{devi.sys_id}}\">&#8203;</label>
      </div>
    </div>
  </div>
</div>','c4d8262b2f001010b7763c96f699b6e2','noti_device_base_template','cb1766e72f001010b7763c96f699b61d')
java.sql.BatchUpdateException: (conn=2293) Duplicate entry 'noti_device_base_template' for key 'id'

[DScroggins]

That means you already have ng-templates with the same names as the ones I've used in the update set. ng-templates cannot be named the same so you'd have to find the existing 5 and rename. These are the ones used in my update set:

• noti_category_base_template
• noti_device_subs_template
• noti_device_base_template
• noti_notification_base_template
• noti_notification_subs_template

Find the existing ones and rename. Then you will not get those errors. 

[Stefan Reichelt]

Thank you so much! Now I managed to try it out. I'm impressed!
Sorry for the stupid questions, btw. I'm glad for the lessons learned on the way.

Best regards,

Valen

[DScroggins]

Wonderful! Happy that you were able to get it working. And they were not stupid questions just glad we were able to get it corrected for you. Enjoy! 

--David

[Tim Deniston]

Has anyone tried to get this working in a Customer Service (CSM/CSP) portal? It doesn't look like external users have access to create notification channels, like an SMS device. Any thoughts on how to make that happen? 

[Jared Spears1]

In the header of your portal, you can add the following highlighted lines, replacing 'esc' with the URL Suffix of your portal:

<ul class="dropdown-menu">
<li class="header-menu-item"><a href="{{data.link}}">${Profile}</a>
</li>
<li class="header-menu-item"><a href="/esc?id=actsub_notif_pref&sysparm_domain_restore=false&sysparm_stack=no">${Notification Settings}</a>
</li>
<li class="header-menu-item"><a href="{{::portal.logoutUrl}}">${Logout}</a>
</li>
</ul>

[Danny Rhoades]

Where would you add this without cloning the header widget?  Or does doing this require you to clone the header widget?

[Danny Rhoades]

Is there a way to also manage the Knowledge article subscriptions like the OOTB widget does?  This seems to handle notifications well while the OOTB widget was good at article subscriptions.  Anyway to combine them so we can do both in a single widget?

[DScroggins]

Hi Danny yes you could combine the functionality of both widgets or an easier solution is to simply include both on the same page in your portal. That way the user can manage either from a single place.

[Danny Rhoades]

Thanks for the quick reply, David!  Yeah, so I went ahead and took your advice and I put both widgets on the Notification Settings page (actsub_notif_pref).  However, I've noticed a couple issues you may want to explore for future releases:  

1) With both widgets on the same page, the All Notifications switch doesn't always sync up.  One workaround I'm trying is to simply hide the second switch in the hopes it's just a visual bug and not an actual settings conflict. 

2) When browsing the sub-categories, the breadcrumbs only work on the first pass.  The second attempt to go into a sub-category always results in the breadcrumb reverting to < all, which takes you back to the top level categories.  This behavior is not exhibited in the platform UI navigation.   

[Teddy Sincire2]

Hi David,

This works great, EXCEPT when trying to create a personal notification. The 'send when' condition panel doesn't render and I get the javascript error below. Any idea what could cause that?

js_includes_sp.jsx:40015 (g_env) [SCRIPT:EXEC] Error while running Client Script "Set Display Name from Notification Name": TypeError: Cannot read property 'getValue' of undefined 

[DScroggins]

@Teddy Sincire  Hi Teddy apologies for the late reply to your question. Yes one of the downsides to this widget is that conditional fields do not display in the service portal as they do in the normal UI. So the send when field will show as the conditional text string instead of the selection boxes. Unfortunately we have not found a way around this nor have we invested much time into doing so as the general usability for this widget was more than acceptable for our particular use case.

As for your javascript error that is coming from the Client Script 'Set Display Name from Notification Name'. In my update set it was set to run on 'Desktop' only instead of 'All' as in SP one of the fields is not present thus the error is thrown. You can either ignore the error or set it back to UI Type = Desktop so the error does not appear.

Hope this helps.

--David

[Thousif S N2]

Hi David,

How can i make User should see only few notification under 'Notification by Category' tab, as of now he is able to see all the notification so i wanted to restrict?

[Thousif S N2]

Yeah as mentioned by @Teddy Sincire,  I was also checking if we have any solution to get the condition filter the way we see it in the platform

[Ajay Sharma2]

Hi @David Scroggins, I came across one thing while using this solution. End user i.e user with only snc_internal role are not able to create new notification channel from portal using this widget. However they are able to create from platform view using system settings--> notification preferences. Any thoughts on this?

[Bharath38]

This looks great. Just wondering if we can filter the Categories and Notifications that display. I'm trying to update client script but no luck , no documentation on api as well. any ideas please ? @David Scroggins  @Jason Williams 

[DScroggins]

Hello,

Yes it can be done. You'd need to alter the HTML template and use an angularJS filter to filter the list returned by the API. You can find more details here:

https://docs.angularjs.org/api/ng/filter/filter

As far as API documentation there is no official documentation. I used browser tools to capture the requests being made using the OOB Notification tools then did a bit of "trial and error" to determine what I could do with them. Most of what is used though is exactly the same as using the platforms notification manager.

Hope this helps point you in the right direction.

--David

[Arshiya Dudekul]

Hi @DScroggins  

Awesome customisation. This has been very useful for our teammates.

However, we would like to have 'Apply conditions' page as well to show up on service portal widget when we click on primary email>Apply conditions

Like shown below, is there any chance to get this done please?

Waiting for your repsonse!

Thanks

Arshiya

[Akshay Jadhav1]

Hello @DScroggins  

We have a requirement for the Notification Preference appearing on the CSM Portal. Once the "XYZ" Notification is received on the Portal for the particular user, then the "Primary Email" toggle button for the "XYZ" Notification should automatically turn off. The User would then decide whether to Turn ON/OFF the Primary Email.

Currently, when the Notification is triggered and visible on the Portal, the "Primary Email" toggle button automatically turns ON.

Please find the attached screenshot for your reference.

Thank you in Advance for your help !!

[Daniel R2]

Hi @DScroggins  - thank you for the post, It certainly looks like what we are wishing to use!

I have tried importing the xml into my PDI however still unable to find the custom widget.

1. I have ensured i have set the glide.notification.preference.ui.enabled system property as false as per mentioned in the community post

2. I found 2 business rules with on the sys_update_set table which is aborting the action and also disabled them.

3. I have also checked the ng-templates and we dont have any with the same names

So unsure why I still can not see the custom widget?

[Sukriti17]

@DScroggins  This has been mentioned on this post in 2020 as well but I am unable to find a solution for this and unfortunately facing the similar kind of issue using this widget.

"When browsing the sub-categories, the breadcrumbs only work on the first pass.  The second attempt to go into a sub-category always results in the breadcrumb reverting to < all, which takes you back to the top level categories.  This behavior is not exhibited in the platform UI navigation.   "

I have attached screenshot for the same. Looking forward to a solution, thank you in advance

[Priya103]

Hi @DScroggins    - thank you for the post, I have a requirement where I need to get the DESCRIPTION of the notifications from notification table. I tried few solutions but none of them seems to be working. Could you please help on this one? Thank you!

[Ashish kumar10]

Currently it is showing all category present in sys_notification_category table because of that End user may get confused with so much options. Can we limit the no. of category which is more relevant to end user like Approval, Service Request etc. Any suggestion will be beneficial. I tried with the GlideRecord but it disturb the complete Functionality then I created one field notification_preference in sys_notification_category table to use as a filtered specific category. But i am not able to edit API which is using to fetch category. Anyone can suggest how can I edit the API to get required output.

[Richa2]

Hello!

I am looking for a solution to show Digest option in Notification preferences on CSM portal. Do you have any suggestions?

Thanks

[Sandra17]

Hi, 

a former colleague has set up this widget for us. now I need to change the color of “Notifications By Category”. But I can't find the right place. Can anybody help me? The standard color for links would be ok too.

Thanks, Sandra