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 (https://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:
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.
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.
Now click “Submit”
It should look like this for the record.
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.
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”} ];
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”.
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:
You have now successfully added a Dependency to your Service Portal. You go and build something awesome with it!
