How to show warning messages

[Aljo2]

Problem

On server-side scripting, ServiceNow provides two options to show messages, either as info messages or as an error message. For this ServiceNow provide GlideSystem functions, addInfoMessage() and addErrorMessage(). This would work for both native and portal. But for some reason, ServiceNow does not have a similar method for warning messages. Exploring the community also did not give a complete solution. But by joining some pieces a solution was found and sharing the same here.

Solution

The first part solution was found from the article from ServiceNow Guru. This involves the creation of a UI script to build a custom UI notification that only works in the native view of ServiceNow. The second part of the solution is finding a way to manipulate gs.addInfoMessage() to show a warning message. These two were combined to get a complete solution.

3 main components help in this solution. Let's start with the UI script(refer to the ServiceNow guru link for further details).

1. UI Script

The script in the UI script looks something like below:

var intervalTest = setInterval(function(){
	if(typeof CustomEvent != 'undefined'){
		clearInterval(intervalTest);
		setCustomEvents();
	}
},500);


function setCustomEvents(){
	//Set the name of the notification
	var notifName = "warning_message";
	CustomEvent.observe('glide:ui_notification.' + notifName,
						function(notification){
		var msgText = notification.getAttribute('message_warn'); 
		var options = {}; 
		options.type = 'warn';// set the type of message as warning to get styling correct
		options.text =  msgText;
		options.sticky = true;
		options.closeDelay = 5000;
		options.fadeIn = 500;
		options.fadeOut = 500;
		new NotificationMessage(options);
	});
}

Note: In the options styles property can be added to have much customizations. For example options.styles= {'background-color': '#fff3cd', 'border-color': '#ffeeba', 'color': '#856404'};

2. Script Include

The script include contains instantiation of the above UI script and gs.addInfoMessage() call which later will be manipulated in widget.

Name: uiNotification

Application: Global

Accessible from: All application scopes

Script:

var uiNotification = Class.create();
uiNotification.prototype = {
	initialize: function() {
	},
	addWarningMessage : function(message){
		var uri = ''+gs.action.getGlideURI(); // to get uri to identify request is from native or portal

		/*for request from portal*/
		if(uri.startsWith('api/now/sp')){
			gs.addInfoMessage("<div class='warning'>"+message+"<div>");	
		}

		/*for request from native*/
		else{
			var notification;
			if(typeof UINotification != 'undefined') {
				notification = new UINotification('warning_message'); //Calgary and later releases use the UINotification object call
			} else {
				notification = new Packages.com.glide.ui.UINotification('warning_message'); //For pre-Calgary releases, use the Java Package call
			}

			var messageText= message;


			notification.setAttribute('message_warn', messageText);
			notification.send();
		}
	},
	type: 'uiNotification'
};

3. Widget

Now we need to make changes to the form widget. For this, we need to clone the OOB form widget. After cloning, in the client script, search for 'spModel.uiActionComplete' in this function we need to add for loop code mentioned below:

$scope.$on("spModel.uiActionComplete", function(evt, response) {
		$scope.submitting = false;

		/*Changing type of uinotification if meaage contains class=warning*/
		for(var it=0; it<response.$$uiNotification.length;it++){
			if(response.$$uiNotification[it].message.indexOf('class="warning"')){
				response.$$uiNotification[it].type= 'warning';
				 }
		}
		
		var sysID = (response.isInsert) ? response.sys_id : $scope.data.sys_id;
		loadForm($scope.data.table, sysID).then(constructResponseHandler(response));
	});

This changes the type of UI notification to warning and will take styles of warning class which ServiceNow internally has.

Testing

To test we can call the script include in business rules or UI actions as below:

new global.uiNotification().addWarningMessage('This is test warning message');

Output

In Portal

In native

Thank you.