Working with URLs in ServiceNow Service Portal: Redirection, Value Retrieval, and URL Manipulation

Alka_Chaudhary · ‎10-08-2024

In ServiceNow’s Service Portal, managing URLs is an integral part of building dynamic pages and widgets. Whether you're handling redirection, fetching URL parameters for data display, or dynamically updating the URL, understanding both client-side and server-side URL manipulation techniques is crucial.

In this article, we'll cover:

Redirection using href and onclick (client-side scripts).
Extracting values from the URL.
Dynamically updating the URL without a page reload.
Deleting parameters from the URL.
Using $sp.getParameter() to extract URL parameters in server-side scripts or widgets.

1. Redirecting in Service Portal

a. Using href for Static Redirection

The easiest way to redirect in Service Portal is by using an HTML anchor tag (<a>) with the href attribute. This method is often used for static redirection.

Example of static redirection:

<a href="https://www.example.com" target="_blank">Go to Example</a>

For internal ServiceNow pages, you can redirect users to forms or records, like an Incident form:

 <!--Provide Sys id of any incident--->
 <a href="/sp?id=form&table=incident&sys_id=b7ab0507930b0210325c313efaba10c9">View Incident</a>

b. Using onclick for Dynamic Redirection

If you need to dynamically redirect users based on their actions (e.g., button clicks), use a client-side script with the $window.location.href or $location.url property.

Example with $window and $location Redirection:

1. Using $window:

HTML

<button ng-click="redirectToPageUsingWindow()">Click to Redirect Using Window</button>

Client Script

api.controller=function($scope, $window) {
    // Redirect using $window.location.href
    $scope.redirectToPageUsingWindow = function() {
        $window.location.href = '/sp?id=sc_home';  // Replace with your desired ServiceNow page URL
    };
};

2. Using $location:

HTML

<button ng-click="redirectToPageUsingLocation()">Click to Redirect Using Location</button>

Client Script

api.controller=function($scope, $location) {
    // Redirect using $location.url
    $scope.redirectToPageUsingLocation = function() {
        $location.url('/sp?id=sc_home');  // Replace with your desired ServiceNow page URL
    };
};

For redirection to a form in ServiceNow based on a dynamic parameter:
HTML

<button ng-click="redirectToIncident('incident','b7ab0507930b0210325c313efaba10c9')">Go to Incident</button>

Client Script

api.controller=function($scope,spUtil,$location,$window) {
	/* widget controller */
	var c = this;
	$scope.redirectToIncident = function(table, id){
		$window.location.href='/sp?id=form&table='+ table +'&sys_id='+ id;
	}
};

2. Extracting Values from the URL in Client-Side Scripts

In Service Portal, you can extract values from the URL, such as sys_id, id, or other query parameters, using JavaScript's URLSearchParams.

Example:

api.controller=function($scope,spUtil,$location,$window) {
	/* widget controller */
	var c = this;

	function getParameterByName(name) {
		var url = top.location.href; //or $window.location.href;
		var params = new URLSearchParams(url);
		return params.get(name);
	}

	// Get 'sys_id' from the URL
	var sysId = getParameterByName('sys_id');
	spUtil.addInfoMessage('Incident Sys ID: ' + sysId);
};

For example, if the URL is /sp?id=form&table=incident&sys_id=abc123, calling getParameterByName('sys_id') will return abc123.

You can also access URL parameters in the client-side controller of a widget using the $location service in AngularJS:

api.controller=function($scope,spUtil,$location,$window) {
	/* widget controller */
	var c = this;

	function getSysId($scope, $location) {
		// Get 'sys_id' from the URL
		var sysId = $location.search().sys_id;
		if (sysId) {
			spUtil.addInfoMessage('Incident Sys ID using Location: ' + sysId);
		} else {
			spUtil.addInfoMessage('No sys_id found in URL');
		}
	}
	getSysId($scope,$location);

};

Here, $location.search() is used to fetch the query parameters in the client-side controller. This is useful when you want to handle URL parameters in client-side logic.

Example of Adding the Base URL Dynamically:

HTML

<button ng-click="redirectToHome()">Go to Home</button>

Client Script

api.controller=function($scope, $window) {
    // Get the Base URL dynamically
    var hosturl = 'https://' + $window.location.host;

    // Redirect to Service Catalog Home Page with dynamic base URL
    $scope.redirectToHome = function() {
        $window.location.href = hosturl + "/sp?id=sc_home";
    };
};

In this example:

$window.location.host is used to dynamically obtain the base URL (e.g., https://instance_name.service-now.com), which makes the redirect more flexible across different environments.
The full URL is constructed using this base along with the relative path to the Service Portal page (in this case, "/sp?id=sc_home").
By using $window.location.host, you avoid hardcoding the instance URL. This ensures that your redirects will work seamlessly across environments like development, test, or production without needing to change any code

3. Dynamically Updating the URL Without Page Reload

If you want to update or add parameter to the URL dynamically without reloading the page, you can use history.pushState or history.replaceState. This allows you to modify the browser's URL without causing a full-page refresh.

Example:

HTML

<button ng-click="updateURLwithoutLoad()">
    On Click Update URL
  </button>

Client Script

api.controller=function($scope,spUtil,$location,$window) {
	/* widget controller */
	var c = this;

	function updateSysIdParameterInUrl(parameter, paramVal) {
		var url = new URL(document.URL); // Create a URL object from the current document URL
		var params = url.searchParams;   // Get the URL's search parameters

		// Update or add the parameter
		if (params.has(parameter)) {
			params.set(parameter, paramVal); // Update existing parameter
		} else {
			params.append(parameter, paramVal); // Add new parameter
		}

		// Replace the current history entry with the updated URL
		$window.history.replaceState(null, null, url.toString());
	}

	$scope.updateURLwithoutLoad = function(){
		updateSysIdParameterInUrl('sys_id','b7ab0507930b0210325c313efaba10c9')	;// Provide sys id of any Incident
	}

};

This updates the URL dynamically to reflect the new sys_id while keeping the current page content intact.

pushState(): Adds a new entry to the browser’s history, so users can navigate back and forth between states.
replaceState(): Replaces the current URL without adding a new entry to the history.

4. Deleting Parameters from the URL

Sometimes you may need to remove specific parameters from the URL without reloading the page. You can achieve this using JavaScript with URLSearchParams combined with history.pushState or history.replaceState.

Example:

HTML

<button ng-click="deleteParamterFromURL()">
    Delete Parameter
  </button>

Client Script

api.controller=function($scope,spUtil,$location,$window) {
	/* widget controller */
	var c = this;
	function deleteUrlParameter(paramName) {
		var url = new URL(window.location.href);
		var params = new URLSearchParams(url.search);

		// Remove the parameter
		params.delete(paramName);

		// Update the URL without reloading the page
		$window.history.pushState(null, null, url.pathname + '?' + params.toString());
	}
	
	$scope.deleteParamterFromURL = function(){
		// Example: Delete 'test' from the URL
		deleteUrlParameter('test');
	}
};

This removes the specified parameter from the URL while keeping the user on the current page.

params.delete(paramName) removes the parameter from the query string.
history.pushState() updates the URL in the browser's address bar without causing a page reload.

5. Using $sp.getParameter() in Server-Side Scripts

When working in ServiceNow Service Portal widgets, you might need to extract URL parameters on the server side to query records or perform certain logic. This is where $sp.getParameter() comes in handy.

For example, in a widget’s server script, you can use $sp.getParameter() to retrieve parameters from the URL:

Server Side Script

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

	// Get 'sys_id' parameter from the URL
	var sysId = $sp.getParameter('sys_id');

	// Fetch the Incident record based on 'sys_id'
	if (!gs.nil(sysId)) {
		data.incidentRecord = new GlideRecord('incident');
		if (data.incidentRecord.get(sysId)) {
			// Record found
			data.incidentNumber = data.incidentRecord.number;
			data.shortDescription = data.incidentRecord.short_description;
			gs.addInfoMessage('Incident Number: '+ data.incidentNumber +', Short Description: '+data.shortDescription);
		} else {
			gs.addInfoMessage('Record not found');
		}
	} else {
		gs.addInfoMessage('No sys_id provided');
	}

})();

In this example:

$sp.getParameter('sys_id') retrieves the sys_id from the URL.
The GlideRecord object is used to query the incident table and fetch the record based on the sys_id.

By mastering these techniques, you'll be able to build more dynamic, flexible, and user-friendly applications in the ServiceNow Service Portal.

If this article is helpful to you, please mark it as helpful .👍

Thanks & Regards,

Alka Chaudhary

Ravi Chandra_K · ‎10-09-2024

Good write up Alka! super useful!

RahulJ2611 · ‎10-29-2024

Fantastic write-up, Alka! This is exceptionally helpful and clear. Appreciate the effort you've put into this!