Skip to Main Content

You might have come across the use case of changing the URL in the Service Portal without reloading the page. A common pattern is to have additional navigation elements on your page, for instance tabs, which can be accessed once a user navigates back to a URL with specific parameters in it. Specifically, let's say you have a URL which looks like this:

https://<instance_name>.service-now.com/sp?id=my-page


and once a user clicks a tab you would like to change it to something like this: 

https://<instance_name>.service-now.com/sp?id=my-page&tab=my-tab


Soon you might have figured out that everytime you change an URL parameter in the Service Portal the whole page reloads, which definitely is an aweful experience for the user and puts additional waiting time and data downloading on his side. Moreover, it also means more unnecessary server and database requests on your ServiceNow instance.
 

Giving the Service Portal a Break Using SPA 

Now you might have wondered why we have put an inviting bathtub in relaxing atmosphere as this blog's banner image. The reason for this is that ServiceNow has implemented a typically undocumented functionality, namely the SPA parameter. Anyhow, here SPA presumably stands for Single Page Application, a type of website concept used by AngularJS and therefore by the ServicePortal under the hood. Setting this parameter in the URL prevents the page from reloading completely. An example implementation of a Service Portal widget's client controller could look like this:

api.controller = function($scope, $location) {

    ...

	$scope.tabSelected = function(tab){

		var params = $location.search();
		params.tab = tab;
		params.spa = 1;
		$location.search(params);
		/*
		* Add this line if you want to prevent the URL change from being added to the history's stack
		* but rather replace the current top entry of the stack 
		*/
		$location.replace();
		
	}
	
    ...
	
}