UI Action to trigger REST API Post call

[dvelloriy]

Hello Community, 

I need your help. We have to build an integration to create a support case in Coupa from SN procurement case. 

This is how we are planning to configure:

1. Create a UI action on a procurement case ("Create Coupa Support Case"). On click, it should open a splash page to input required attributes needed to create the Coupa case (Like Subject, priority, description, category etc).

2. Procurement technician should fill this input form and click submit.

3. On submit, it should trigger the Rest API POST call and create the Coupa case with the required payload from SN.

If you can help extend some help here, it would be appreciated.

Thanks.

[dvelloriy]

Can someone please assist here?>

[Kai Tingey]

Hi There

I typed out a big reply yesterday but it's gone, so i dont know what happened there. Maybe i was wildly wrong and someone removed it lol.

rather than risk the fact that it was indeed removed for being dumb and having the same thing happen again, the gist of it was

use the UI action to render a UI page with glidemodal

UI page can run a script (i suggested using ajax) to send your rest message with your provided inputs using sn_ws.RESTMessageV2. 

https://developer.servicenow.com/dev.do#!/reference/api/orlando/server/c_RESTMessageV2API

if that's wildly off base someone please let me know, because that's how i would do it and I'd rather know if i was wrong. In the past i've done it directly in a UI action but in that case a delay while the client waited for the response was acceptable, and we didn't need a modal form.

[dvelloriy]

Thanks Kai. Do you have a sample script i can refer to for UI action and UI Page.?

[Kai Tingey]

sure thing

UI action would be a client callable script, something like this (where your ui page is called "coupaModal")

onclick: spawnCoupaUIPage() 

function spawnCoupaUIPage() {
	
	var taskId = g_form.getUniqueValue();
	var dialog = new GlideDialogWindow("coupaModal"); //Render the UI Page 
		dialog.setTitle("Coupa Form"); //Set the dialog title
		dialog.setPreference('sysId', taskId); //Pass in sys_id for use in the dialog
		dialog.render(); //Open the dialog	
		
	
	}

the bones of your ui page might go something like this, adjust as necessary

HTML:

<?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_taskId" expression="RP.getWindowProperties().get('sysId')" />
	<input type="hidden" id="hidden_sys_id" value="${jvar_taskId}"></input>

<table style="width:700px;">
		<tr>
            <td>
                <g:form_label>Input 1</g:form_label>
            </td>
            <td>
            <g:ui_input_field label="" name="form_input1" id="form_input1" mandatory="true" size="40" />
            </td>
        </tr>
		<tr>
            <td>
                <g:form_label>Input 2</g:form_label>
            </td>
            <td>
            <g:ui_input_field label="" name="form_input2" id="form_input2" mandatory="true" size="40"/>
            </td>
        </tr>
		<tr>
			<td colspan="2" style="text-align:right;padding-top:10px;">
				<button class="btn btn-default" onclick="processCancel()" style="margin-right:10px;">Cancel</button>
				<button class="btn btn-primary" onclick="okButton()">Ok</button>
			</td>
		</tr>
		
	</table>


</j:jelly>

That will just have two string inputs and a hidden field storing the originating records sys_id for use later.

The client script will call ajax to send the rest message, in this case the script include it is calling would be "coupaREST"

Client Script:

//OK button script
function okButton(){

	if (form_input1.value == ''){
		alert('Input 1 is required');
		return false;
	}

	if (form_input2.value == ''){
		alert('Input 2 is required');
		return false;
	}

//Call REST message with AJAX
var ga = new GlideAjax('coupaREST'); 
    ga.addParam('sysparm_name', 'sendMSG'); //ajax function
    ga.addParam('input1',form_input1.value); //pass input1 into ajax
	ga.addParam('input2',form_input2.value); //pass input2 into ajax
	ga.addParam('hidden_sys_id',hidden_sys_id.value) //pass sys_id into ajax
    
    ga.getXML(myCallBack); //process response

	function myCallBack(response) { 
   //Dig out the 'answer' attribute
   	var ajaxcomplete = response.responseXML.documentElement.getAttribute('answer'); 
    alert(ajaxcomplete); //alert the result to make sure all is well.
    GlideDialogWindow.get().destroy(); //Close the dialog window
    action.setRedirectURL(current);
    
}
}


//Cancel button script
function processCancel(){
		
	GlideDialogWindow.get().destroy();
	
}

then your ajax script might go something like this:

var coupaREST = Class.create();
coupaREST.prototype = Object.extendsObject(AbstractAjaxProcessor, {

sendMSG:function(){
	var i1 = this.getParameter('input1');
	var i2 = this.getParameter('input2');
	var sysid = this.getParameter('hidden_sys_id');

	var inc = new GlideRecord('incident'); //change this to whatever table your ui action is running from
	inc.get(sysid);

	var r = new sn_ws.RESTMessageV2('name_of_rest_message', 'POST');
	r.setRequestHeader("Accept","application/json");
	r.setRequestHeader('Content-Type','application/json');
	r.setRequestBody('[{"input_1": "'+i1+'","input_2": "'+i2+'}]'); //json string
	
	var response = r.execute();
	var responseBody = response.getBody();
	var httpStatus = response.getStatusCode();
	gs.log(responseBody + ' ' + httpStatus,'debug'); //log the response for testing


	//add some note to the original record
	inc.work_notes = "Submitted to Coupa";
	inc.update();

	return responseBody; //send response body to ui page
}


    
});

note i've just used the incident table for all this, just substitute for the table you are doing it with and adjust as required.

the above would just spawn a modal form with two string inputs, then take the values the user provides in the form and sends them as a json string in your rest message. That will need to be changed depending how your rest message is configured, i've just thrown something basic in there as an example. 

hopefully that helps a little bit.