AngularJS Custom Filters

An angular filter selects a subset of items from array and returns it as a new array.

If you need a filter that isn't supplied by ServiceNow out-of-the-box, this article will be invaluable to you. There isn't much documentation on this, and there are definitely situations where you need those additional filters when working on Service Portal project.

Step 1: Add UI Script

I've been using a library of useful filters from this github (it is common). The Github contains the code and documentation on usage:

In order to use this code, you can put it in a UI Script within ServiceNow.


1. Copy the code for the filter library here
2. In ServiceNow, use the Left Navigator Bar > System UI > UI Scripts
3. Click New

  • API Name: angular-filter.js
  • UI Type: Mobile/Service Portal (London), in other versions: check the Global checkbox
  • Copy the code into the Script area

4. Click Submit

Step 2: Add Dependency

In Service Portal, you can link JavaScript and CSS files to widgets. This allows you to create dependencies between their widgets and third party libraries, external style sheets, and angular modules.


1.  In ServiceNow, use the Left Navigator Bar > Service Portal > Dependencies
2. Click New

  • Name: angular-filter
  • Include on page load: false (Important!)
  • Angular module name: angular-filter

3. Right Click and Save
4. In the JS Include Related List, Click New

  • Order: 100
  • Dependency: angular-filter
  • JS Include: angular-filter

5. Click Submit

Step 3: Create Widget

For this example, I created a widget that uses the "groupBy" filter. You don't necessarily need to use groupBy here, but this is an example on how you can use the groupBy filter.  The groupBy filter doesn't exist OOB.


1.  In ServiceNow, use the Left Navigator Bar > Service Portal > Widgets
2. Click New
3. Widget Name: Filter Example.  Add code below and click save.


<div class="panel panel-default">
  <div class="panel-heading">${Priority 1 Tickets}</div>
  <div class="panel-body">
    <table class="table table-striped" ng-repeat="(key, value) in data.taskList | groupBy:'sys_class_name'">
          <td scope="col" colspan="6" title="{{key}}"><h3 class="className">{{key}}</h3></td>
          <th scope="col" colspan="1" title="task.number">Number</th>
          <th scope="col" colspan="2" title="task.short_description">Short Description</th>
        <tr scope="row" ng-repeat="task in value | orderBy:'number'">
            <td scope="col" colspan="1" title="task.number">{{task.number}}</td>
             <td scope="col" colspan="2" title="task.short_description">{{task.short_description}}</td>

Server Script

(function() {
    data.taskList = [];
    var grTask = new GlideRecord('task');
    grTask.addQuery('active', true);
    grTask.addQuery('priority', 1);
        var task = {};
        task.number = grTask.number.toString();
        task.short_description = grTask.short_description.toString();
        task.sys_class_name = grTask.sys_class_name.getDisplayValue();

Client Controller

function() {
  /* widget controller */
  var c = this;

Step 4: Add Dependency to Widget

After you create the widget (or have a widget you want to use).  Add the dependency to the widget.


1.  In ServiceNow, use the Left Navigator Bar > Service Portal > Widgets
2. Select the widget using the Platform Editor (not the designer, should look like picture below)
3. Scroll to the bottom of the form, and in the dependency section, click Edit
4. Select angular-filter
5. Click Save


Step 5: Add Widget to Page

Create the page for the widget.  This step isn't needed if you already have a page.


1.  In ServiceNow, use the Left Navigator Bar > Service Portal > Pages
2. Click New

  • Title: Filter Example
  • ID: filter_example

3. Click Save
4. In the Related Links Section, click "Open in Page Designer"
5. In the designer, drop a 12 in the container and the "Filter Example" widget

Step 5: Try in Service Portal


Unknown Provider

You forgot to add the dependency or are calling a filter that doesn't exist in the UI Script.

Failed to instantiate module

You selected "include on Page Load" on the Widget Dependency.  That should be false.