calling REST message in UI macro

[priyankapalaska]

I have created a widget to fetch data by calling REST API (third party tool). So on the catalog form, its showing based employee_id field changes, which is working fine. 

But for native UI I have to create a UI Macro in place of widget. But through macro I am not able call REST msg. and How I can update the macro based on field changes. 

Any suggestion. 

Appreciate quick replies. 

Thanks a lot,

Priyanka

[ChrisBurks]

I guess I forgot to explain making a REST call:

There are a few different ways to do this in the Macro:

Option 1) Use a g:evaluate so that is runs server side . This means you'll already know the info it needs to use in the REST call or that at least the info will be populated on the page before it gets to calling the macro

Option 2) Use regular javascript or jquery (or other js framework including GlideAjax ). Using this method you can easily make the calls necessary to communicate with the 3rd party tool. If you need to communicate with ServiceNow's server side then the GlideAjax is best (remember this will include setting up a client callable script include). Or you could keep using client side and consume the ServiceNow REST api's.

Here is my previous code modified with a Server Side REST call and a Client side REST call using JQuery

<?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_server_call" jelly="true" object="true">
		
			var rm = new sn_ws.RESTMessageV2(); 
		rm.setEndpoint('https://<instance_name>.service-now.com//api/sn_sc/servicecatalog/items/060f3afa3731300054b6a3549dbe5d3e?sysparm_view=ess');
			rm.setHttpMethod('get');
		    rm.setBasicAuth('username','password');
			var response = rm.execute();
			var respBody = JSON.parse(response.getBody());
		    // this last line will be passed to the evaluate var: jvar_server_call set above
			respBody.result; 
	</g:evaluate>
<script>

function callTangoeMacro1(desc,price,name,id)
{
	var formEl = document.querySelector('#tangoform');
	formEl.querySelector('#descVal').value = desc;
	formEl.querySelector('#priceVal').value = price;
	formEl.querySelector('#idVal').value = id;
	formEl.querySelector('#nameVal').innerText += (" " + name);

        jQuery.ajax({
		url: 'api/now/table/incident/2761b3b8db636300860bd421cf96198e?sysparm_display_value=all${AMP}sysparm_fields=number,short_description,priority',
		method: 'GET',
		success: doThis
	})
	
	
	function doThis(resp){
	 $j('#client-call')[0].innerText = resp.result.number.display_value;
	}
	
}
	
	
	
</script>
	<div id="tangoform">
		<h3>The Macro</h3>
		<h3 id="nameVal">Name: </h3>
		<form class="clearfix">
			<div class="form-group">
				<label class="col-xs-12 col-md-3 control-label">
					<span class="label-text">Description</span>
				</label>
				<div class="col-xs-12 col-md-9 form-field input_controls" style="margin-bottom: 15px">
					<input id="descVal" value="" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-12 col-md-3 control-label">
					<span class="label-text">Price</span>
				</label>
				<div class="col-xs-12 col-md-9 form-field input_controls">
					<input id="priceVal" value="" class="form-control" style="margin-bottom: 15px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-12 col-md-3 control-label">
					<span class="label-text">ID</span>
				</label>
				<div class="col-xs-12 col-md-9 form-field input_controls">
					<input id="idVal" value="" class="form-control" />
				</div>
			</div>
		</form>
	</div>
	<div>
		<h3>From Server Call</h3>
		<h4><strong>Product:</strong>		<span style="color: red">${jvar_server_call.short_description}</span></h4>
	</div>
	<div>
		<h3>From Client Call</h3>
		<h4><strong>Product:</strong>	<span id="client-call"  style="color: blue"></span></h4>
	</div>
</j:jelly>

Rendered:

Notice how the server call is already present as the server side runs first and before full load.