Skip navigation

Let's learn today how to use one of the powerful concepts of Service Portal called Record Watcher. This feature allows a widget developer to respond to table updates in real-time.

 

Now let us create a simple widget to keep count of our Critical Incidents to find out how Record Watcher works.

 

  • Step1: Create a widget

       Click on widgets under "Service Portal" application menu (or you can also create widgets using widget editor). Create a new widget by clicking on the new button.

          Below is the example widget I have created.

 

Screen Shot 2016-10-09 at 6.14.24 PM.png

 

 

Please use the below snippets to create your widget

 

HTML:

 

<div class="critical-incidents col-md-2">

    <div class="panel panel-default">

        <div class="panel-heading">Number of Critical Incidents</div>

        <div class="panel-body text-center">

            <div class="circle-bg" ng-class="{'red-bg' : incidata.changed}">

                <p class="inci-number"> {{c.data.incidentCount}}</p>

            </div>

        </div>

    </div>

</div>

<div class="col-md-9 ">

  <p class="changed-rec">Changed Record {{incidata.changedRecord.display_value}}</p>

</div>

 

ng-class is triggered whenever data changes to change the background to red

We also print the Changed/Inserted record information when the watcher is fired

 

Client Controller:

 

function(spUtil, $scope, $timeout) {

    /* widget controller */

    var c = this;

    $scope.incidata = {};

    $scope.incidata.changed = false;

    spUtil.recordWatch($scope, "incident", "priority=1^state!=7", function(name, data) {

  

    console.log(data);

    $scope.incidata.changedRecord = data;

        c.server.update();

        $timeout(function() {

            $scope.changeBg();

        }, 500);  

    });

 

    $scope.changeBg = function() {

        $scope.incidata.changed = true;

        $timeout(function() {

            $scope.incidata.changed = false;

        }, 500);

    }

}

 

As you can see, we need to inject spUtil into our client controller. We have defined our watcher above like

spUtil.recordWatch($scope,tableName,filter, function(name,data){

//name: event information

//data:  information about updated or inserted record

})

Second Argument is the tableName you want to attach the watcher for

Third Argument is the filter for the table

Fourth is a callback function that is executed when watcher is fired, this function has two arguments.

 

In our example, the second argument is Incident table, and the filter is "priority=1^state!=7", meaning we only care about incidents with priority critical and not closed.

 

Inside our watcher, we have a timeout just to change the background color.

 

SASS:

.critical-incidents {

    margin-top: 20px;

    width: 300px;

    .inci-number {

        font-size: 36px;

        margin-bottom: 0px;

        padding: 25px;

        color: #E51B24;

    }

    .circle-bg {

        margin-left: auto;

        margin-right: auto;

        width: 100px;

        height: 100px;

        border-radius: 50%;

        background: #fff;

    }

    .red-bg {

        background: #E51B24;

        .inci-number {

            color: #fff;

        }

    }

}

.changed-rec {

    font-size: 18px;

    margin-top: 30px;

}

 

Server Script:

 

 

(function() {

    /* populate the 'data' object */

    /* e.g., data.table = $sp.getValue('table'); */

    data.incidentCount = '';

 

    var gr = new GlideRecord('incident');

    gr.addQuery('priority', 1);

    gr.addQuery('state','!=', 7);

    gr.query();

    data.incidentCount = gr.getRowCount();

})();

 

After populating your widget with above code, go ahead and save it.

 

 

  • Step 2: Add widget to a service portal page

     Please go ahead and add the widget we created above to a page using designer.

     After you have added this widget to a page, let us check it out how it works

 

Screen Shot 2016-10-09 at 7.39.09 PM.png

 

I have 10 critical incidents in my instance, thus the page looks like this for me.

 

Now let's try to create a new Critical Incident to see if our watcher fires.

 

record_watcher.gif

 

As you can see, our record watcher is fired every time a new Critical Incident is created. Whenever record watcher is fired, information about the record is returned as well.

We are logging this data to the console, if we check the browser console, you can see what the data of the inserted/changed record look like.Screen Shot 2016-10-09 at 7.49.09 PM.png

 

Record watchers in Service Portal are very powerful. Can be used to display real-time data.

 

Thanks,

Sush

In this blog, we will see how we can use $rootScope to share data between widgets via a simple example. Every angular application has a single root scope. All other scopes are descendant scopes of the root scope. Theoretically, if we assign something to a root scope variable, we should be able to access this value inside other widgets as well.

 

In my previous blog How to communicate between widgets in Service Portal , we created a portal, where we used $rootScope.broadcast to hide/show widgets. Today we will be using the same example, but this time, we will use a root scope variable to achieve this.

 

So, I am going to start by changing HTML and Client Controller of Widget 1 we created in  Step 3.

 

 

Step 1: Edit the widget we created in Step 3 (Menu Pills widget)

 

Screen Shot 2016-06-26 at 12.38.32 AM.png

 

Please use the below snippets to create your widget

 

Client Controller:

function($rootScope,$scope,$timeout) {

  /* widget controller */

  var c = this;

 

  $rootScope.selectedPill = 'requests'; // When page loads, default pill selected

 

  //Let's create an array of objects in root scope here, This array should be available for use inside any of the widgets in this app.

  //We will try to access this again later inside other widget

  $rootScope.simpSons = [

       {

            "name":"Homer Simpson",

            "title" : "Nuclear Safety Inspector"

       },

       {

            "name":"Bart Simpson",

            "title" : "Troublemaker"

       }

  ];

  

 

  $scope.selectPill = function(selection){

       //When the pills are clicked, we change the root scope variable.  

       $rootScope.selectedPill = selection;

  };

}

 

HTML:

<div>

<!-- your widget template -->

  <div class=" pill-background row">

    <div class="each-pill" ng-class="{'active':$root.selectedPill == 'requests'}" ng-click="selectPill('requests')">

       <i class="fa fa-2x fa-list "  aria-hidden="true"></i>

        <p class="remove-margin">All Requests</p>

    </div>

    <div class="each-pill" ng-class="{'active':$root.selectedPill == 'create'}" ng-click="selectPill('create')">

    

      <i class="fa fa-2x fa-wrench " aria-hidden="true"></i>

      <p class="remove-margin">Create Request</p>

    </div>

    <div class="each-pill" ng-class="{'active':$root.selectedPill == 'contact'}" ng-click="selectPill('contact')">

    

      <i class="fa fa-2x fa-phone "  aria-hidden="true"></i>

      <p class="remove-margin">Contact</p>

    </div>

  </div>

</div>

 

 

As you can see above, we can access $rootScope variable in HTML using $root.

 

 

 

 

Now let's edit the other three widgets we created in Step 4, 5 and 6

 

Step 2:  Edit Widget we created in Step 4 (All requests widget)

Screen Shot 2016-06-26 at 1.23.40 AM.png

HTML(Only first line edited, everything else is same):

<div ng-if="$root.selectedPill == 'requests'">

<div class="container">

<!-- your widget template -->

  <div class="col-md-10 center-div">

  <h3 style="display:inline-block;float:left;">Requests</h3>

  <div ng-repeat="incident in data.requestList | limitTo:5" class="each-incident">

    <h4>{{incident.number}}</h4>

    <p style="margin-bottom:0px;">{{incident.short_desc}}</p>

  </div>

</div>

</div>

 

The first line of this HTML has ng-if. based on the root scope variable selectedPill, these widgets are shown/hidden.

 

Client Controller:

function($scope,$rootScope,$timeout) {

  /* widget controller */

  var c = this;

}

 

 

Step 3: Edit Widget we created in Step 5 (Create request widget)

Screen Shot 2016-06-26 at 1.43.33 AM.png

 

 

HTML: (Only first line edited, everything else is same)

<div ng-if="$root.selectedPill == 'create'" class="col-md-10 center-div">

  <h3 style=" border-bottom: 1px solid #ddd;padding-bottom:5px; ">Create Request</h3>

<form class="form-horizontal">

    <div class="form-group">

        <label for="" class="col-sm-2 control-label">Request Number</label>

        <div class="col-sm-10">

            <input type="text" class="form-control"  placeholder="Number" autocomplete="off"> </div>

    </div>

    <div class="form-group">

        <label for="" class="col-sm-2 control-label">Short Description</label>

        <div class="col-sm-10">

            <input type="text" class="form-control"  placeholder="Short Description" autocomplete="off"> </div>

    </div>

   <div class="form-group">

        <label for="" class="col-sm-2 control-label">Description</label>

        <div class="col-sm-10">

            <textarea class="form-control" rows="3"></textarea>

    </div>

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <div class="checkbox">

                <label>

                    <input type="checkbox"> High priority </label>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <button class="btn btn-default">Submit</button>

        </div>

    </div>

</form>

</div>

 

Client Controller:

function($scope,$timeout) {

  /* widget controller */

  var c = this;

}

 

 

Step 4: Edit Widget created in Step 6 (Contact widget)

Screen Shot 2016-06-26 at 1.48.47 AM.png

 

 

HTML(Only first line edited, everything else is same):

<div ng-if="$root.selectedPill == 'contact'">

    <div class="container">

        <!-- your widget template -->

        <div class="col-md-10 center-div">

            <h3 style=" border-bottom: 1px solid #ddd;padding-bottom:5px; ">Contact</h3>

            <div class="flex-display col-md-9">

                <div class="">

                    <h4>Address:</h4>

                  <p class="remove-margin">XYZ Company</p>

                    <p class="remove-margin">123 Washington st</p>

                  <p class="remove-margin">Washington</p>

                </div>

                <div>

                    <div class="">

                        <h4>Email:</h4>

                        <a href="javascript:void(0)">abc@abc.com</a>

                    </div>

                    <div class="">

                        <h4>phone</h4>

                        <a href="javascript:void(0)">(123)4567890</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

 

 

Client Controller:

function($scope,$rootScope,$timeout) {

  /* widget controller */

  var c = this;

 

  //Let's try to log the array of objects we created in step 1 here.

  console.log(JSON.stringify($rootScope.simpSons));  

 

}

 

 

Now that we have edited our widgets to make use of root scope variable. Go ahead and test it out. It should work as before.

 

rootscope.gif

 

And if you check your browser console. You can see the  $rootScope.simpSons we logged inside "Contact widget".

 

Screen Shot 2016-08-19 at 4.41.14 PM.png

This is just a simple demonstration of how we can use $rootScope to share data between widgets.

 

Thanks,

Sush

Widgets are a very powerful component in Service Portal. A Service Portal page can have multiple widgets or just one widget. If your page is complex, It is a good practice to divide its functionality into multiple widgets to keep the implementations separate. When dealing with multiple widgets on a page its good to know how to communicate between them.

 

Folks familiar with angularjs might have already come across $emit, $broadcast and $on. This is exactly what we will be using today talk to other widgets.

 

We will start by creating a simple page with four widgets.

  • Widget 1: Has three buttons, clicking on these buttons shows its corresponding widget.
  • Widget 2/3/4: Shown/ Hidden based on button click in widget 1

 

Step 1: Create a portal or use an existing one.

         If you have a portal you are already working with just use that or to create a sample one to play with.  Attaching a screenshot of my example portal.

 

Screen Shot 2016-06-26 at 12.24.25 AM.png

 

Step 2: Create a Service Portal page and add that to your example portal.

         For demo purpose, I am going to create a new page give it a name/id and add that to my portal we created in the previous step.

Screen Shot 2016-06-26 at 12.32.10 AM.png

 

 

Now let's start creating our widgets.

 

Step 3: Create Widget 1

Click on widgets under "Service Portal" application menu (or you can also create widgets using widget editor). Create a new widget by clicking on the new button.

          Below is the example widget I have created.

Screen Shot 2016-06-26 at 12.38.32 AM.png

 

Please use the below snippets to create your widget

 

HTML:

<div>

<!-- your widget template -->

  <div class=" pill-background row">

    <div class="each-pill" ng-class="{'active':c.selectedPill == 'requests'}" ng-click="selectPill('requests')">

       <i class="fa fa-2x fa-list "  aria-hidden="true"></i>

        <p class="remove-margin">All Requests</p>

    </div>

    <div class="each-pill" ng-class="{'active':c.selectedPill == 'create'}" ng-click="selectPill('create')">

     

      <i class="fa fa-2x fa-wrench " aria-hidden="true"></i>

      <p class="remove-margin">Create Request</p>

    </div>

    <div class="each-pill" ng-class="{'active':c.selectedPill == 'contact'}" ng-click="selectPill('contact')">

     

      <i class="fa fa-2x fa-phone "  aria-hidden="true"></i>

      <p class="remove-margin">Contact</p>

    </div>

  </div>

</div>

 

 

As you can see div "each-pill" has ng-click to function "selectPill". There is ng-class to show the difference between selected/unselected pill

 

 

Client Controller:

function($rootScope,$scope,$timeout) {

  /* widget controller */

  var c = this;

 

  c.selectedPill = 'requests'; // When page loads, default pill selected

 

  /*broadcast to other widgets after waiting for 500 milliseconds,

    just to make sure other widgets are loaded and ready to listen when we broadcast.     

  */

  $timeout(function(){

  $rootScope.$broadcast('showHideWidget', 'requests');

  },500);

 

  //broadcast the selection when ever cliked on each pill

  $scope.selectPill = function(selection){

  c.selectedPill = selection;

  $rootScope.$broadcast('showHideWidget', selection);

 

  };

}

 

 

In script above I have used $rootScope.$broadcast to notify other widgets, we can either use $rootScope.$broadcast or $rootScope.$emit.

Keep in mind $rootScope.$broadcast will notify all $rootScope.$on and $scope.$on

$rootScope.$emit will only notify $rootScope.$on.This is the syntax $broadcast/$emit

 

//firing an event

$rootScope.$broadcast('myCustomEvent', 'data');

data can be a JSON object, in our case its just a string.

 

//listening for an event

$scope.$on('myCustomEvent', function (event, data) {

  console.log(data); // 'Data to send'

});

OR

$rootScope.$on('myCustomEvent', function (event, data) {

  console.log(data); // 'Data to send'

});

 

 

 

CSS/SASS:

 

//Make sure sp-landing-back.jpg is in images table

.pill-background {

    background: url(sp-landing-back.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height: 300px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    .each-pill {

        &.active {

            color: #c70000;

        }

        height:150px;

        width:200px;

        background:#ddd;

        padding:50px;

        text-align:center;

        border-radius:4px;

      cursor:pointer;

     

      p{

       margin-top:5px;

      }

    }

}

.color-red {

    color: #c70000;

}

.remove-margin {

    margin-bottom: 0px;

}

 

After populating your widget with above code, go ahead and save it.

 

Widget 1 looks like this and you can see three pill boxes, clicking on them will emit/broadcast information to all other widgets. By default "All requests" pill is selected when the page loads.

emit.png

 

 

Step 4: Create Widget 2 (All requests)

Screen Shot 2016-06-26 at 1.23.40 AM.png

HTML:

<div ng-if="showWidget == 'requests'">

<div class="container">

<!-- your widget template -->

  <div class="col-md-10 center-div">

  <h3 style="display:inline-block;float:left;">Requests</h3>

  <div ng-repeat="incident in data.requestList | limitTo:5" class="each-incident">

    <h4>{{incident.number}}</h4>

    <p style="margin-bottom:0px;">{{incident.short_desc}}</p>

  </div> 

</div>

</div>

 

The first line of this html has ng-if. Based on "data" broadcasted with the event, these widgets are shown/hidden.

 

Client Controller:

function($scope,$rootScope,$timeout) {

  /* widget controller */

  var c = this;

  $scope.showWidget = "";

 

     //Listening for "showHideWidget" event

  $rootScope.$on('showHideWidget', function(event,data) {

  $timeout(function(){

       $scope.showWidget = data;

  });

  });

}

 

CSS:

.each-incident{

display:flex;

  justify-content:space-between;

  align-items:center;

  padding:10px;

  border-top:1px solid #ddd;

  clear:both;

}

.center-div{

  float: none;

  margin-left: auto;

  margin-right: auto;

}

 

Server script:

(function() {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */

data.requestList = [];

 

var gr = new GlideRecord('change_request');

gr.addQuery('category','Hardware');

gr.query();

while(gr.next()){

var temp = {};

  temp.number = gr.number.toString();

  temp.short_desc = gr.short_description.toString();

  data.requestList.push(temp);

}

})();

 

Step 5: Create Widget 3 (Create request)

Screen Shot 2016-06-26 at 1.43.33 AM.png

 

 

HTML:

<div ng-if="showWidget == 'create'" class="col-md-10 center-div">

  <h3 style=" border-bottom: 1px solid #ddd;padding-bottom:5px; ">Create Request</h3>

<form class="form-horizontal">

    <div class="form-group">

        <label for="" class="col-sm-2 control-label">Request Number</label>

        <div class="col-sm-10">

            <input type="text" class="form-control"  placeholder="Number" autocomplete="off"> </div>

    </div>

    <div class="form-group">

        <label for="" class="col-sm-2 control-label">Short Description</label>

        <div class="col-sm-10">

            <input type="text" class="form-control"  placeholder="Short Description" autocomplete="off"> </div>

    </div>

   <div class="form-group">

        <label for="" class="col-sm-2 control-label">Description</label>

        <div class="col-sm-10">

            <textarea class="form-control" rows="3"></textarea>

    </div>

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <div class="checkbox">

                <label>

                    <input type="checkbox"> High priority </label>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <button class="btn btn-default">Submit</button>

        </div>

    </div>

</form>

</div>

 

Client Controller:

function($scope,$rootScope,$timeout) {

  /* widget controller */

  var c = this;

  $scope.showWidget = "";

  $rootScope.$on('showHideWidget', function(event,data) {

 

  $timeout(function(){

  $scope.showWidget = data;

  });

  });

}

 

CSS:

.center-div{

    margin-left: auto;

    margin-right: auto;

  float:none;

}

 

Step 6: Create Widget 4 (Contact)

Screen Shot 2016-06-26 at 1.48.47 AM.png

 

 

HTML:

<div ng-if="showWidget == 'contact'">

    <div class="container">

        <!-- your widget template -->

        <div class="col-md-10 center-div">

            <h3 style=" border-bottom: 1px solid #ddd;padding-bottom:5px; ">Contact</h3>

            <div class="flex-display col-md-9">

                <div class="">

                    <h4>Address:</h4>

                  <p class="remove-margin">XYZ Company</p>

                    <p class="remove-margin">123 Washington st</p>

                  <p class="remove-margin">Washington</p>

                </div>

                <div>

                    <div class="">

                        <h4>Email:</h4>

                        <a href="javascript:void(0)">abc@abc.com</a>

                    </div>

                    <div class="">

                        <h4>phone</h4>

                        <a href="javascript:void(0)">(123)4567890</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

 

 

Client Controller:

function($scope,$rootScope,$timeout) {

  /* widget controller */

  var c = this;

  $scope.showWidget = "";

  $scope.$on('showHideWidget', function(event,data) {

 

  $timeout(function(){

  $scope.showWidget = data;

  });

  });

}

 

CSS:

.flex-display{

  display:flex;

  justify-content:space-between;

  padding:10px;

  clear:both;

  margin-left: auto;

  margin-right: auto;

  float: none;

}

.center-div{

  float: none;

  margin-left: auto;

  margin-right: auto;

}

.remove-margin{

margin-bottom:0px;

}

 

Step 7: Adding our widgets to Service Portal page.

        The last and final step is to add the widgets we created to a Service portal page using Service portal designer.

Screen Shot 2016-06-22 at 4.22.33 PM.png

 

click on "Service portal configuration" which takes you to a new page with a list of options.

 

Screen Shot 2016-06-22 at 4.22.47 PM.png

 

Select designer, A new page opens up and u can see all the "Service portal pages", search for your page, in my case its "sp_examples_homepage"

Screen Shot 2016-06-26 at 1.53.47 AM.png

Now in the page designer view drag and drop "Container" on the page followed by 12 column layout. On the left side, you can see all the widgets available for us to use, search for our widget we created in step 3 (Menu pills) and drag and drop that into the 12 column layout.

Drag and drop another 12 column layout below the "Menu Pills" widget. Search for our widgets we created in step 4,5,6 (All requests, Create request, Contact widget) and drag and drop them onto the 12 column layout. It should look something like this.

Screen Shot 2016-06-26 at 2.01.33 AM.png

 

We have successfully added our widgets to the page. Now let's check out this widget in action. Click on "portals" under "Service Portal" Application menu. Select the portal we used for this tutorial and hit "try it" button at the bottom.

 

You should see your Menu pills Widget communicating with other widgets to hide/show them.

 

widget_comm.gif

 

This is just a simple demonstration of how widgets can talk to each other. $rootScope.$broadcast('myCustomEvent', 'data'); can be very useful, when you want to send data to other widgets.

 

Sorry for the long post, hope this helps.

 

Thanks,

Sush

Service Portal is the quick and flexible way to build an application portal that your employees will love. I have been playing with it a lot and thought I would share with you all few things I learned. This topic is targeted towards advanced users/web developers.

 

People who have worked with angular might have used the built in filters for formatting expression values like dates, currencies etc or limiting the number of items displayed and more. Most of the time these built-in filters will do the job for us, but sometimes in your application, you might have a need to create a custom angular filter.

 

With angular providers in Service Portal, we can create angular directives, services and factory that can be automatically injected into your client script controller.

Screen Shot 2016-06-22 at 10.16.06 AM.png

If you see the type dropdown above, it doesn't have the option to create a "filter". So you cannot use angular providers for creating filters.

 

I will walk you through the steps to create a custom filter that we can use on a list of Incidents.

 

  • Step 1: Create a portal or use an existing one.

         If you have a portal you are already working with just use that or to create a sample one to play with.  Attaching a screenshot of my example portal.

 

Screen Shot 2016-06-22 at 1.31.55 PM.png

 

 

  • Step 2: Create a Service Portal page and add that to your example portal.

         For demo purpose, I am going to create a new page and call it homepagetest and add that to my portal I created in the previous step.

 

Screen Shot 2016-06-22 at 1.34.44 PM.png

 

  • Step 3: Create a simple widget to get a list of incidents and displaying it.

         Click on widgets under "Service Portal" application menu. Create a new widget by clicking on the new button.

          Below is the example widget i have created.

Screen Shot 2016-06-22 at 1.41.16 PM.png

 

Please use the below snippets to create your widget

HTML:

 

<div class="container">

<!-- your widget template -->

  <div class="col-md-12">

  <h3 style="display:inline-block;float:left;">Incident List</h3>

  <div class="form-group" style="display:inline-block;float:right;margin-top: 10px;margin-bottom: 0px">

   

    <div class="col-sm-12"> <input type="text" ng-model="filterValue" class="form-control"  placeholder="Search" style=""> </div>

  </div>

  </div>

  <div ng-repeat="incident in data.incidentList | startsFilter:filterValue" class="each-incident">

    <h4>{{incident.number}}</h4>

    <p style="margin-bottom:0px;">{{incident.short_desc}}</p>

  </div>

</div>

 

 

CSS:

 

.each-incident{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:10px;

  border-top:1px solid #ddd;

  clear:both;

}

 

Server Script:

 

(function() {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */

data.incidentList = [];

var gr = new GlideRecord('incident');

  gr.addQuery('active', true);

  gr.query();

  while(gr.next()){

  var temp = {};

  temp.number = gr.number.toString();

  temp.short_desc = gr.short_description.toString();

  data.incidentList.push(temp);

  }

})();

 

After populating your widget with above code, go ahead and save it.

 

  • Step 4: Creating our filter and adding a dependency to our widget.

        We will be coding our filter inside good old UI Scripts. So go ahead and create a new UI Script record.

 

Screen Shot 2016-06-22 at 3.50.50 PM.png

 

Here is the filter code. copy and paste this into UI script.

 

(function() {

    angular.module('startsWithFilter', []).filter('startsFilter', function() {

        return function(input, filtervalue) {

            if (filtervalue) {

                var output = [];

                for (var i = 0; i < input.length; i++) {

                    if (input[i].short_desc.toLowerCase().substring(0, filtervalue.length) === filtervalue.toLowerCase()) {

                        output.push(input[i]);

                    }

                }

                return output;

            } else {

                return input;

            }

        };

    });

})();

 

Now that we have the filter script ready let's add this as a dependency. Under "Service Portal" application menu there is a module called "Dependencies", go ahead and click on that. Once you are in, click new and fill in the form as below.

 

Screen Shot 2016-06-22 at 4.00.21 PM.png

 

Now we have to create a JS includes record and link the UI Script.

 

Screen Shot 2016-06-22 at 4.04.48 PM.png

 

On JS Includes table click on new and create a record for our "startsWithFilter" and select the source as UI Scripts, the search box appears for you to select the UI Script, here please select "startsWithFilter" and hit save.

Screen Shot 2016-06-22 at 4.07.29 PM.png

 

Now your widget dependency record is complete and it should look something like this.

 

Screen Shot 2016-06-22 at 4.10.39 PM.png

 

We now our filter script added to Dependencies list, next let's link this to our simple widget created in step 3. Open the widget record and scroll down to the section that says "Dependencies".

insert a new row and select the dependency we added above, save the widget record.

Screen Shot 2016-06-22 at 4.15.54 PM.png

 

  • Step 5: Adding our widget to a Service Portal page.

        The last and final step is to add the widget we created to a Service portal page using Service portal designer.

Screen Shot 2016-06-22 at 4.22.33 PM.png

 

click on "Service portal configuration" which takes you to a new page with a list of options.

 

Screen Shot 2016-06-22 at 4.22.47 PM.png

 

Select designer, A new page opens up and u can see all the "Service portal pages", search for your page, in my case its "homepagetest"

Screen Shot 2016-06-22 at 4.23.18 PM.png

Now in the page designer view drag and drop "Container" on the page followed by 12 column layout. On the left side you can see all the widgets available for us to use, we will just search for our widget we created in step 3 and drag and drop that into the 12 column layout. It should look something like this.

Screen Shot 2016-06-22 at 4.32.18 PM.png

 

We have successfully added our new widget on the page. Now let's check out this widget in action. Click on "portals" under "Service Portal" Application menu. Select the portal we used for this tutorial and hit "try it" button at the bottom.

 

you should see your Incident List Widget with a search field on the top right. Just start typing and you can see our "startsWithFilter" doing its magic.

 

startsWithFilter.gif

 

Sorry for the long blog, I wanted to make it as straightforward as possible for anyone with any level of expertise to follow this. Hope this helps.

 

Thanks,

Sush

Filter Blog

By date: By tag: