ServiceNow Search Source

ServiceNow Search Source

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.


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


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


  • 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.
search source form
  • Complete the fields on the Data Source tab.
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
Example Typeahead tab settings.

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

typeahead search

Search Sources

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

Search Sources

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
Face Filters


Define a search source

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

Source Code

image 25
<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(, data.q)"></a> -  
  <span ng-if=""><a href="mailto:{{}}">{{}}</a></span>

<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.


image 26

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.

image 27

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.

image 28

Typeahead search template

Create an advanced typeahead template

  1. Complete the required fields in Define a search source.
  2. In the Typeahead tab of the Search Source record, select the Advanced typeahead config check box.
  3. 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>
    <span class="snb-typeahead-people-search-primary" ng-bind-html=" | uibTypeaheadHighlight:query"></span>
    <div class="snb-typeahead-people-search-secondary">{{}} - {{}}</div>
image 29

Add search source to Portal

image 30

Searching places: Homepage(id=index) or search page (id=search)

image 31