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

AngularJS: API: filter

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:

https://github.com/a8m/angular-filter

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

Instructions

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.

Instructions

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.

Instructions

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.

Body HTML

<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'">
      <thead>
        <tr>
          <td scope="col" colspan="6" title="{{key}}"><h3 class="className">{{key}}</h3></td>
        </tr>
        <tr>
          <th scope="col" colspan="1" title="task.number">Number</th>
          <th scope="col" colspan="2" title="task.short_description">Short Description</th>
        </tr>
      </thead>
      <tbody>
        <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>
        </tr>
    </table>
  </div>
</div>

Server Script

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

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.

Instructions

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.

Instructions

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