logo

NJP

Custom Modals: How to customize your Service Portal to make Incidents easier to manage for your end users

Import · Sep 17, 2018 · article

One of the big criticisms I've heard from users is that they have a hard time looking through their incidents on the portal, because every time they click, they lose their place in the list. Tricks like holding "Ctrl" when clicking don't seem to work on widgets, so it's easy to lose your spot in a list when going back and forth between records on a list.

Additionally, we found that while users wanted to be able to filter their lists, they were overwhelmed by the choices if we simply enabled the built-in filter functionality. In reality, they were really only selecting between records that were Open, Closed, watch-listed, or all of them together.

The solution I came up with was to copy the widget, and add a button that reset the filter. I was able to use the existing code included for the breadcrumb filter's operation to do this. see below:

image

In order to do this, I copied the "data table from instance definition" wrapper widget, and pointed it to the custom copy of the "data table widget", where I made changes to the HTML and the client script:

image

image

The end effect is that the buttons change the filter on the list, and it re-loads without having to re-load the entire page. That solves the problem with the filter widget. Now, how do you allow people to browse incidents without page loads? I tried a few different ways to accomplish this. I tried linking the list widget with another widget that displayed the form on the page, but found that this didn't work well on small screens. I tried combining them into one widget, but ran into the same problem.

Finally, I settled on a modal window:

image

In order to do this, I modified the widget so that it triggered the modal window to open instead of navigating to a new page. I took advantage of events that were already firing in the nested widgets, and overwrote them to instead open the modal window. Here's how I did it:

image

The event I'm using here is already being fired by the widget nested inside this one, but it was doing something completely different. I've used the spModal directive(?) to initiate the customized form widget I created.

After that, I just modified the form widget to take input for the sys id, table, and view.

The feedback from testers is overwhelmingly positive. I'm currently exploring other ways to use modals to reduce the need to navigate away from pages, especially when using a list.

View original source

https://www.servicenow.com/community/developer-articles/custom-modals-how-to-customize-your-service-portal-to-make/ta-p/2330296