GlideAjax Tutorial 1: Display 5 Most Recent Incidents in a UI Page

July 15, 2014

Tags: ServiceNow GlideAjax Ajax Asynchronous JavaScript GlideRecord

Ajax is a technique used on the client-side to create asynchronous web applications. It allows web applications to send and receive data asynchronously without interfering with the display of the existing page. GlideAjax is a ServiceNow implementation of Ajax.

This tutorial will demonstrate how to use GlideAjax to show an up-to-date list of items on a UI Page. Firstly we’ll create the server side script with the use of Script Includes. The Script Include will have a method to return an array of incidents. Secondly we’ll create a UI Script which invokes the Script Include using ajax and retrieves the list of incidents. Finally the UI Script will be used within a UI Page to display the data.

#Script Include (server-side) Create a new script include with “Client callable” checked to ensure it can be accessed via ajax. The script include contains one method to retrieve the specified number of incident records and return them in a JavaScript object.

var IncidentAjax = Class.create();
IncidentAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  getRecentIncidents: function() {
var num = this.getParameter("sysparm_num");

// Query the incident table, sort by the "Opened" field and limit the records
var inc = new GlideRecord("incident");
inc.orderByDesc("opened_at");
inc.setLimit(num);
inc.query();

// Build an array of objects which represent incidents
var incidents = [];
while(inc.next()) {
  var incident = {};
  incident.number = inc.number;
  incident.openedAt = inc.opened_at.getDisplayValue();
  incident.openedBy = inc.opened_by.getDisplayValue();
  incident.priority = inc.priority.getDisplayValue();
  incident.shortDescription = inc.short_description;
  incident.link = inc.getLink();

  incidents.push(incident);
}

// Create response XML element
var item = this.newItem();
// Add the array of incidents to the XML element
  },

});

The important points to note:

You must extend AbstractAjaxProcessor to make the script client callable.
this.getParameter([Parameter name]); Get parameters that are passed in from the client-side call
var item = this.newItem(); - Create a response XML element
item.setAttribute(key, value); - Add string values to the return objects

#UI Script (client-side) Now we need to create a client-side script to consume the data from the script include. The client-side script can be written directly in a UI Page but it will be specific to that page. I’ve decided to write a UI Script to make the code reusable.

var RecentIncidents = Class.create();

RecentIncidents.prototype = {

	initialize: function() {
	},

	get: function(num, callback) {
		var ajax = new GlideAjax("IncidentAjax");
		ajax.addParam("sysparm_name", "getRecentIncidents");
		ajax.addParam("sysparm_num", num);

		this.callback = callback;

		ajax.getXML(this._refreshList.bind(this));
	},

	_refreshList: function(AJAXResponse) {

		var items = AJAXResponse.responseXML.getElementsByTagName("item");
		var incidents = items[0].getAttribute("incidents").evalJSON();

		this.callback(incidents);
	}

}

UI Page (service-side and client-side) Now we need something to display the results to the user. I’ll use a simple UI Page with some JavaScript that will interact with our UI Script.

<?xml version="1.0" encoding="utf-8">
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script language="javascript" src="RecentIncidents.jsdbx" type="text/javascript">
<ol id="most-recent-incidents"></ol>
</j:jelly>

Client script code:

var recentIncidents = new RecentIncidents();
function refreshList() {
	recentIncidents.get(5, function(incidents) {
		var list = $("most-recent-incidents");
		list.innerHTML = "";
		for (var i = 0; i < incidents.length; i++) {
			list.insert("< li >" + incidents[i].openedAt + "< / li >");
		}
	});
}

setInterval(refreshList, 1000);

HTML The code within the HTML field just gives us a placeholder to represent the data.

Client script We request the 5 most recent incidents and provide a callback function. Once the server responds to the request, we update the list with the new incidents.

Comments