Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Calling Map Pages from UI Actions etc and passing parameters

Ian Elrick1
Kilo Expert

Hi

I am keen to start making use of some of the google maps functionality in map pages. 

I understand where to put the script etc but am struggling to see:

1. How do I pass parameters to the map page script to allow me to gliderec based on ticket number/ affected users/affected items etc to highlight these on a map. 

2. How do I call the map page functionality from a UI action button?

 

Thanks in advance

2 REPLIES 2

Ben Collyer
Giga Guru

Hi Ian,

In your UI Action you need to make Client = true.  In "onClick" put in the name of your client side function like: "doClientSide();".  In the script 

function doClientSide(){
  var dialog = new GlideDialogWindow('UI_Page_Name_Goes_Here');
  dialog.setTitle('Page title goes here'); //Set the dialog title
  dialog.setPreference('current_sys_id', g_list.getChecked().toString()); 
  dialog.render(); //Open the dialog
}

In your UI Page set the HTML to something like:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	
	<g:evaluate var="jvar_sys_id" expression="RP.getWindowProperties().get('current_sys_id')" />
	
	<g:evaluate var="iframe_url" jelly="true">
		var session = gs.getSession();
		session.putClientData('workOrdersList', '' + RP.getWindowProperties().get('current_sys_id'));
		
		var iframe_url = "$map_page_primary.do?sysparm_sys_id=a18ac018dba97b806fb6403c3a96190a$[AMP]sysparm_stack=no";
		iframe_url;
	</g:evaluate>
	
	<div style="width:800px; height:600px;">
			<iframe frameborder="0" name="map_frame" id="map_frame" width="100%" height="98%" src="${iframe_url}" />
		</div>
	
</j:jelly>

 

You'll need to replace the "sysparm_sys_id" part with the sys_id of your Map Page.  Your map page script will look something like:

var session = gs.getSession();
var workOrdersList = session.getClientData('workOrdersList');

(function() {
	var grWO = new GlideRecord('wm_order');
	grWO.addEncodedQuery('sys_idIN' + workOrdersList);
	grWO.query();
	
	while (grWO.next()) {
		//get the current record's location
		var loc = grWO.location;

		// create new map item for this WO
		var item = map.addItem(grWO);

		// set lat/long
		item.latitude  = loc.latitude;
		item.longitude = loc.longitude;
		
		//build the html value to be displayed when you click the map icon
		item.html = _buildWOTHTML(grWO, loc);
		
		//set the size of the icon
		item.icon_width = 10;
		item.icon_height = 10;
	}
	
	/**
	* Inner function to build HTML box for WO entry
	*/
	function _buildWOTHTML(gr, loc) {
		var s = [];
		s.push("<a href='/nav_to.do?uri=wm_order.do?sys_id=" + gr.sys_id + "' target='_blank'>" + gr.number + "</a>");
		s.push("State: <b>"+ gr.getDisplayValue('state') + "</b>");
		s.push("Assigned to: <b>"+ gr.assigned_to.name + "</b>");
		s.push("SLA due: <b>" + gr.getDisplayValue('sla_due') + "</b>");
		s.push("Scheduled start: <b>" + gr.getDisplayValue('expected_start') + "</b>");

		return s.join("<br/>");
	}
})();

I'm yet to discover a better way of passing through values to a Map Page and the documentation of functions with in Map Pages isn't very good.

I hope this helps.

Ben.

Shamma Negi
Kilo Sage
Kilo Sage
Same thing i had to do but couldn't find much on map pages. Hence i did this by copying the sysid in user preference and from there i passed it to map page. Hope this helps
Regards,Shamma Negi