How to add Additional Dependencies to Your Service Portal in ServiceNow

It seems today, the hot topic around ServiceNow is using the Service Portal. But many have found that in some aspects it can be limiting on what can be done out of the box. 

Recently I had a requirement to add a multiple select box to a form, which would allow a user to select multiple items and save them from a single input field. Out of the box, the Service Portal ships with a record picker out of the box, but it has certain limitations, one being that it does not support multiple selections.

In my effort to meet the requirements, I found an AngularJS component called AngularJS Dropdown Multiselect (http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main) that fit the requirements, looked good, and had some nice features added to it.

For the less experienced developer, adding another library to the Service Portal can be a daunting undertaking. But in this post, I’ll show you how easy it is to use an external library and make it part of your Service Portal.

The first thing you need to do is find the CDN url for the library. In this case, it wasn’t readily available on the web site, but a quick search found the location: https://cdnjs.com/libraries/angularjs-dropdown-multiselect . Keep the URL handy you’ll need it in a moment.

OK, let’s get into the Portal itself.

Type Service Portal in the Navigation filter, then click on “Dependencies”. Now click “New” in the main window at the top. You should end up with a screen like this:

 Service Portal 1.jpg

Fill in the values as displayed, then click submit. Go back into the record, and you will have some additional related lists available to you.

 

Service Portal 2.jpg

Click “New” on the JS Includes tab. This will give you a new screen, and we’ll be using the4 CDN URL from above. It should end up like this.

 Service Portal 3.jpg

Now click “Submit”

It should look like this for the record.

Service Portal 4.jpg

The component will now be available in the service portal. That wasn’t so hard. But we don’t have to stop there, I’ll show you a quick example of getting it to work.

We’re going to create a new Widget, so on the left side there, click “Widgets” and then “New”. If you are unfamiliar with scripting, this might seem a little overwhelming, but I will try to keep it simple and give all examples as copy & paste snippets.

Name you widget anything you like, just remember what you named it. Then let’s move on to the template.

According to the documentation, the html needed to embed this into our template is as follows for basic usage:

<div ng-dropdown-multiselect="" options="example1data" selected-

model="example1model"></div>

So let’s paste that in there.

 Service Portal 5.jpg

 

Now we move onto the Client Script. Remember this is just an example of how this works, getting data into from queries is outside the scope of the document, but shouldn’t be very difficult.

Paste this into you Client Script as shown, also add $scope to line number 1:

 

$scope.example1model = [];

$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];

 

Service Portal 6.jpg

Now in it’s current form, it will not work. We have to add the dependency. Scroll to the bottom and under the Dependencies tab, click “Edit”.

 Service Portal 7.jpg

Select your Dependency and move it to the right side, then “Save”.

You can now open the widget in the “Designer” and preview it. It should look like this:

Service Portal 8.jpg

You have now successfully added a Dependency to your Service Portal. You go and build something awesome with it!

 

Topics: servicenow, Service Portal