.
 

Service Portal: Server update methods

May 13, 2019 4:49 am

Published by

Within our Service Portal widgets there are two main ways we can send data from the client to the server, these are

Method Description
this.server.get([Object]) Calls the server and sends custom input. Returns Promise.  
this.server.update() Calls the server and posts this.data to the server script. Returns Promise.  

It’s important to understand the difference between these two methods and when to use them. As an example we’re going to create a simple widget that will display unassigned incidents and allow a user to assign an incident to themselves or to one of their groups. The code for the initial widget is below or you can import the XML below into the Widget [sp_widget] table.

 

<ul class="list-group">
<li class="list-group-item list-group-header">
Incident
<span class="pull-right">
Assign to me/Assign to my group
</span>
</li>
<li class="list-group-item"
ng-repeat="inc in c.data.list">
{{inc.number.value}}
<br>
{{inc.short_description.value}}
<div class="btn-group pull-right" role="group" aria-label="...">
<button type="button" class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
title="Assign to me"
ng-click="c.assignToMe(inc)">
<span class="fa fa-user"></span>
</button>
<button type="button" class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
title="Assign to my group"
ng-click="c.assignToGroup(inc)">
<span class="fa fa-users"></span>
</button>
</div>
</li>
</ul>

 

 

function() {
  var c = this;
  
  c.assignToMe=function(inc){

  }
  c.assignToGroup=function(inc){
    
  }
}
(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

  var list = [];
  var gr = new GlideRecord('incident');
  gr.addEncodedQuery('active=true^assigned_toISEMPTY');
  gr.query();
  while(gr.next()){
    var o = {};
    $sp.getRecordElements(o,gr,'sys_id,number,short_description')
    list.push(o)
  }
  
  data.list=list;
})();

We’ll focus on the ‘Assign to me’ functionality first. When a user clicks on the ‘Assign to me’ button we need to get the sys_id of the selected record and send it to the server script in order to assign that record to the user. View the Widget on a page and check the data object by hitting ctrl + right click on the Widget and then viewing the browser console. We can see that the data object contains the list of unassigned incidents that is displayed by the widget – so if we were to use this.server.update() we would be sending the list of incidents back to the server unnecessarily. So, in this case we’ll use this.server.get() so we are only sending data that is actually required by the server for this click action. 

Using this.server.get()

this.server.get() accepts a custom data object that will be sent to the server and returns a promise where we must process the response from the server.

  1. Update the Client script to send a sys_id of an Incident to the server using this.server.get() when ‘Assign to me’ is clicked and process the response from the server to move the status and message from the Promise callback to the main controller (update the existing assignToMe function with the below Step 1 code)
  2. Update the server script to respond to the action and return a status and message (add the below Step 2 code at the start of the Server script)
  3. Update the HTML to display the message and status to the user (add the below Step 3 code at the start of the HTML)
c.assignToMe=function(inc){
  //pass an incident sys_id and action id to the server
  c.server.get({
    action: 'assign_to_me',
    sys_id: inc.sys_id.value
  }).then(function(rsp){
    c.status=rsp.data.status;
    c.msg=rsp.data.msg;
  })
}
//respond to 'assign_to_me' action
if(input && input.action == 'assign_to_me'){

  var grInc = new GlideRecord('incident');
  grInc.get(input.sys_id);
  grInc.assigned_to=gs.getUserID();

  //return a status and message through the data object
  if(grInc.update()){
    data.status='success';
    data.msg=grInc.number + ' has been assigned to you!';			
  } else {
    data.status='warning';
    data.msg=grInc.number + ' could not be assigned to you!';			
  }
  return;
}
<div class="alert alert-{{c.status}}" 
     role="alert"
     ng-show="c.msg">
  {{c.msg}}
</div>

Conclusion

We have used this.server.get()to send a custom data object to the server rather than using this.server.update()which would send the entire data object from the client.

Best Practice

In any situation where we are sending data from client to server we should be sending as little data as possible in order to improve the performance of our app – as such we should be using this.server.get()wherever possible.

Challenge

  1. Use recordWatch functionality to remove an Incident from the list after it has been assigned
  2. Allow the user to assign an Incident to a group they are a member of

 

Tags: