Restyling Notifications in Service Portal

Service Portal Service Now Self Service System Employee

Today I am going to show you how to change the styling of the built-in notifications in Service Portal. The default notifications in Service Portal are based on the Bootstrap Alerts components, but I prefer the smaller “Toast” notifications of Bootstrap 4.

Default

Service Portal Service Now Self Service System Employee

 

New Style

 

 

 

 

The following CSS sets a new width and aligns the notifications in the upper right corner of the screen rather than spanning the whole page. You will need to add the following styles into a CSS Include in your theme.

CSS

If you are already on the Madrid release, I recommend replacing the above HEX colors with the $brand-success and $brand-danger variables so that they can be driven by the variables defined on your theme.

If you wish to trigger notifications from your own widget, you can trigger notifications using either of the following.

Server Side:

gs.addInfoMessage(“Success goes here”);
gs.addErrorMessage(“Error goes here”);

Controller:

spUtil.addInfoMessage(“Success goes here”);
spUtil.addErrorMessage(“Error goes here”);

 

BEFORE

Service Portal Service Now Self Service System Employee

AFTER

Service Portal Service Now Self Service System Employee

This is just a small example of how you can restyle the default notifications, but there is still plenty of ways this could be improved. If you have some ideas or other styles that you would like to share, feel free to post them in the comments below.

13 comments

  1. Sweet Alert should definitely be added. We often see developers using basic “alerts” in their scripts. Sure it can be manually added, would be a great addition oob.

  2. Have you tested on this renders on mobile? Either the ServiceNow Classic or new Virtual Agent? My client is still on London so we can’t use the new virtual agent app (yet). I’m curious if it its compatible. I do like the UI better! Thanks for posting!

    1. These styles are specific to Service Portal, but could easily be ported to work inside other areas of the platform.

  3. Looks nice. Is there a way to center these notifications instead of them hanging out on the right side of the screen?

    1. Chris, sure. Simply remove all the styles defined on #uiNotificationContainer and instead set the width on the “.alert” class.

  4. Fantastic one, since I came across a requirement some days back work on system defined error and info messages, I think this would be a good start for it.
    Also, is there any way, that we can keep this messages stay for some more time or keep it there on the screen until I click on the cross-symbol to remove it from the screen?

    Thanks Nathan. You always inspire.

  5. Pardon me,

    I’m new to Service Portal.
    Can you please tell me where exactly do we need to add this code.
    I tried creating new style sheet for Service Portal but I get the same notification.

    1. You go to the theme used for your portal and there’s a related list called CSS include. That’s where you can map this style sheet to your theme and it’ll work.

  6. Hi Nathan,
    thank you for this article.

    Just an additional trick, if you want to test the CSS without create the Widget…
    You can execute this in the browser console :

    angular.element(document.body).injector().get(‘spUtil’).addInfoMessage(“Texte du message d’info”);
    angular.element(document.body).click()

    Have a nice day
    Christophe

  7. Hi Nathan,

    This is quite good. Thank you.

    I have one question about using newline characters within spUtil.addInfoMessages and spUtil.addErrorMessages. i see that the newline character (\n) is not supported or ignore by these methods. Do you suggest any workaround ? I do not want to use alert method.

Leave a Reply

Your email address will not be published. Required fields are marked *