Example: set up a GitHub search source

Illustrates advanced search source functionality.

Before you begin

To create an advanced search source, you need an external resource that you can access via REST and basic knowledge of AngularJS.

Procedure

  1. In the platform UI, navigate to Service Portal > Portals and select the portal you want to add search sources to.
  2. From the Search Sources related list, click New.
  3. Create a name and ID for the search source. The ID should be unique, and should not include any spaces or special characters.
  4. On the Data Source tab, select the Is scripted source check box.
  5. Add content to the data fetch script field.

    To set up a GitHub integration:

    (function(query) {
        var results = [];
        /* Calculate your results here. */
        var url = "https://api.github.com/search/repositories?q=" + encodeURI(query);
        var ws = new GlideHTTPRequest(url);
        ws.setBasicAuth("YOUR_USERNAME_HERE", "YOUR_PASSWORD_HERE");
        var jsonOutput = ws.get();
        if (jsonOutput) {
            var response = new JSON().decode(jsonOutput.getBody());
            results = response.items;
            results.forEach(function(result) {
                result.url = result.svn_url;
                result.target = "_blank";
                result.primary = result.full_name;
            });
        }
    
        return results;
    })(query);
  6. Use the Search page template to customize the way the search results display.
    <div>
      <div class="pull-right">
        <strong>{{item.language}}</strong>
        <a ng-href="{{item.svn_url}}/stargazers" target="_blank" class="m-l-sm"><span class="fa fa-star m-r-xs"></span>{{item.stargazers_count}}</a>
        <a ng-href="{{item.svn_url}}/network" target="_blank" class="m-l-sm"><span class="fa fa-code-fork m-r-xs"></span>{{item.forks}}</a>
      </div>
      <a ng-href="{{item.svn_url}}" target="_blank" class="h4 text-primary m-b-sm block">
        <span ng-bind-html="highlight(item.full_name, data.q)"></span>
      </a>
      <p>{{item.description}}</p>
      <p>Updated <sn-time-ago timestamp="item.updated_at"></sn-time-ago> ago</p>
    </div>