SNPortal

Widgets

Displaying Widgets in Modals

Sometimes I find it is useful to be able to display information to a user without having to navigate away from the current page. A nice way to achieve this is to use spModal which is baked into ServiceNow (Helsinki Patch 5 and after).

In the following quick example I am going to clone the “KB Top Rated” widget and add an “eye” glyph that when clicked will open the knowledge article content in a modal window as shown below:

 

 

In order to achieve this we need to do the following:

  1. Clone the widget “KB Top Rated” and call it “KB Top Rated (with modal)”.
  2. Clone the widget “KB Article Page” and call it “KB Article Page (modal use)”; also give it an id of “article-page”.

Now let’s look at each widget individually.

Note – I have only included code from sections that I have changed, so if you don’t see CSS, for example, that means that I did not change the CSS for that widget. I have also tried to highlight where I have changed code by enclosing it in comments.

KB Top Rated (with modal)

HTML:

Here I have added a new href with an ng-click that calls a new function in our controller. I am passing two parameters:

  • the id of the widget to open in the modal, in this case the newly created widget with an id of “article-page”
  • the sys id of the knowledge record we want to display

Client Script:

Within the client script I have defined the new function that will take these two parameters and create the modal dialog. There are numerous parameters we can define here and they are very well documented here.

Note – Don’t forget to inject spModal into your controller function!

KB Article Page (modal use)

Server Script:

The only change I had to make here was to retrieve the sys id using “input.sys_id” instead of “$sp.getParameter(‘sys_id’)” as it is not being passed through the url.

Note – Don’t forget to give your widget an id of “article-page”.

Once you add your “KB Top Rated (with modal)” widget to your page you should now be able to preview the articles content in a modal by clicking on the eye glyph. It is worth noting that the functionality around adding comments, rating and viewing other users comments on an article is not visible in the modal as these are separate widgets. You could, in theory, create all of that functionality in one widget and display it in your modal but it was not necessary for the purpose of this example.

Hopefully you found this article useful. I aim to provide similar articles when I come across functionality that I think could benefit the community.

 

Leave A Comment