The right server call - $http vs server update

[Gaurav Bajaj]

This blog post covers two fundamental use cases of calling server side code from client side in a widget as part of service Portal i.e means of client server communication in service portal.

Thanks to TechNow Ep 28 | Service Portal and Communicating between the Client Script and the Server Script of a widget, I was able to use the these methods for sending inputs from client script to server script. So I will be covering up the same methods in details with their individual benefits.

1) The one which refresh the scope : You would have encountered these methods at least once in pursuit of building custom widgets whether you want to save up comments on a form, submit a record producer or updating any field value and many other times.

• Method Name : c.server.update(), $scope.refresh()
• Feature : Copies entire data object to input object on server.( leaves no stone unturned)
• Key point : Refreshes the scope synchronously as soon as an action is performed on server side.

 2) The one which doesn't refresh the scope : This method might not be used at several occasions but as soon as start building widget, you would feel a need of it as there could be lot of instances where refreshing the scope might not be a good idea. This is achieved by using REST call to the server with $HTTP service.( a service available in the client controller of a widget)

• Method Name : $https.post. $http.get, $http.put, c.server.get() etc (any CRUD operation)
• Feature : Just send the parameter to server with a web service call through REST.
• Key point: No refresh of the scope.

Lets understand it with below example.

Here we have an knowledge article page with View Count on the top and provision to provide feedback on the article.

 I have added two buttons to save the feedback.

•  Server Update : The one which refreshes the scope.
•  Rest Call : The one which just send the data to server and sits with peace(does not refresh the scope).

In the server side of widget, there is an OOB method which update the view count every time someone views the page.(  i.e incrementViewCount()). Server Update method when clicked send the user's input from feedback field to server side and update the kb_feedback table and also re-runs the entire server side code.This increments the view count value every time a user provide his feedback on an article. (not an expected behavior)

 On the other hand, if we click on Rest Call button, it does take the user's input to the kb_feedback table but doesn't re-run server side code and thus keeps view count intact. 

I will add the code snippets from here for better understanding( for both the Server Update and Rest Call)

a) HTML Code 

<textarea class="form-control z-depth-1" id="exampleFormControlTextarea6" rows="3" placeholder="Please give your feedback here..." ng-model="feedback"></textarea>


<button type="button" class="btn btn-primary pull-right submit" ng-click="serverUpdate();">${Server Update}</button>
<button type="button" class="btn btn-success submit" ng-click="restCall();">${Rest Call}</button>
 

 b) Client Controller 

/* This method call the server and send fedback parameter to the server side
for storing it in the kb_feedback table. This makes whole of server side code
to re-run and then updates the entire $scope.
*/
$scope.serverUpdate = function(){
	//c.data.message='';
	$scope.data.feedback=$scope.feedback;
	c.server.update().then(function(){
		$scope.feedback='';
			c.data.message = "Your feedback has been submitted";
		})
	
	
	
}

/* This method call the server through REST web service using the table API urls
and post the feedback paramter into the kb_feedback table.
Although no change in the #scope at all.
*/
$scope.restCall = function(){

var dataURL= $scope.data.instanceURL+'/api/now/table/kb_feedback';
//create object for data to be sent through REST API
var feedbackObj={};
feedbackObj.user=$scope.data.loggedInUser;
feedbackObj.comments=$scope.feedback;
	feedbackObj.article=$scope.data.articleObj.sysId;



  $http.post(dataURL, feedbackObj).success(function(response) {
		
	});


}

Conclusion : Updating the scope is most beautiful feature that could have happened in service portal but there are still good number of scenario where it would be causing an issue. In all such cases, we can rely on $http service and utilize it based on the table/scripted API.

PS : I have attached the widget xml with complete code.

Thanks

Gaurav 

Happy Learning!!