ServiceNow Search Source (2021)

ServiceNow Search Source is how you configure a basic search source to query data from an instance table, or configure an advanced data fetch script to query data across multiple tables and data sources, or to pull data from anywhere on the web.

Overview

Business Need: Searching People on Service Portal by their name. Same feature as OOB knowledge bases and Catalogs.

Servicenow search source OOTB — KB and Catalog Search

Features

In order to enable below features, we need to create a new search source for your data pool.

Procedure

In the platform UI, navigate to Service Portal > Portals and select the portal you want to add search sources to.
From the Search Sources related list, click New to add a search source.
Define the fields on the Search Source form.

Complete the fields on the Data Source tab.

Configure Typeahead settings to allow search results to populate the search field based on user input. Remember to enable the checkbox typeahead to make this feature alive

Now Platform is a application Platform as a Service (aPaaS) providing us with Service Portal Search Features:

Typeahead Search

Typeahead Search widget. Predictive search feature that shows words as users type. Below is the result of typeahead for people search

Search Sources

Search sources are kind of like the Service Portal version of search groups but they’re more robust.

Facet Filters

The homepage uses several widgets to filter the items in the search results list. There are two types of facet widgets:

Simple field facets based on the Knowledge table fields
Advanced query facets based on custom queries of the Knowledge table

STEPS TO IMPLEMENT

Define a search source

Search page template => This is where the result html appearing on “search” page.

Source Code

<div class="snb-people-search__container" ng-if="!item.hasOwnProperty('hidePerson')" score="{{item.score}}">
   <a href="{{item.url}}" class="snb-people-search__detail--name" ng-bind-html="highlight(item.name, data.q)"></a> -  
  <span ng-if="item.email"><a href="mailto:{{item.email}}">{{item.email}}</a></span>
</div>

<div class="snb-people-search__container" ng-if="item.hidePerson && item.isAllCategoryNavigator" isAll="{{item.isAllCategoryNavigator}}">
  <div class="snb-people-search__details-col" style="text-align: center;">
    <span style="font-family: &quot;Charter ITC&quot;, Georgia, serif;font-size: 2.2rem;color: #e9534d;">
      <a href="?id=search&amp;spa=1&amp;q={{item.query}}&amp;t=people_search" class="snb-people-search__detail--name ng-binding" style="color: #e9534d;">
         Load are more Profile Results.
      </a>
    </span>
  </div>
</div>

Output

Data Results

Script defining the endpoint and API calls to fetch data. This field is only visible when Is scripted source is selected.

For an example of a data fetch script, see Tutorial: set up an external knowledge base search source.Note: If defining a facet generation script, inject the facets object into the data fetch script and update the script to generate data for each facet item. For an example, see the Knowledge Base and Service Catalog search sources. Search facets may not behave as expected if integrated into an advanced search source that queries data from a non-ServiceNow site.

Paginating and Filters

Paginates search results. True by default.

If Is scripted source is selected, the value updates to false. To enable pagination for a scripted search source, see Paginate search source results.

Define the maximum number of results per query for the search source in the Search Page widget or Faceted Search widget instance options.

Typeahead search template

Create an advanced typeahead template

Complete the required fields in Define a search source.
In the Typeahead tab of the Search Source record, select the Advanced typeahead config check box.
In the Typeahead template field, add an HTML template.This example uses AngularJS bindings to display service catalog images in the typeahead results.

<div class="snb-typeahead-people-search-wrapper">
    <img ng-if="match.model.avatar != ''" class="snb-content-type-icon-small" src="{{match.model.avatar}}" />
  	<span ng-if="match.model.avatar == ''" class="avatar-extra-large avatar-container" style="width:30px; height:30px; cursor:default; margin-right:10px;"> 
      <div class="avatar soloAvatar bottom"> 
        <div class="sub-avatar mia" ng-style="avatarPicture" style="font-size:1.5rem; line-height:2.6rem; border-radius:50%; border:1.5px solid #d85604; background-color:#fff;">
          <i class="fa fa-user" style="color:#d85604;"></i>
        </div> 
      </div> 
    </span>
    <span class="snb-typeahead-people-search-primary" ng-bind-html="match.model.name | uibTypeaheadHighlight:query"></span>
    <div class="snb-typeahead-people-search-secondary">{{match.model.name}} - {{match.model.email}}</div>
</div>

ServiceNow Search Source