PunchOut Integration with Servicenow as a supplier

tantony
Mega Guru

‎12-08-2020 10:33 AM

We are looking into possibility  for our  service catalog ( on Service portal) to be integrated for PunchOut. Actually supplier integration for Servicenow.Though I have seen very few threads here in the community for Servicenow integration for procurement, I could not find any with Servicenow as a supplier. I am looking for some discussions which will give me some lead into this. Though I have done some integrations in Servicenow my experience with service catalog and portal is limited.

Reading vendor's Supplier Integration Specifications, punchout procurement application will send the "PunchOutSetupRequest" message(cXML) via HTTP POST to the supplier-provided (Servicenow) URL when user navigates towards our Servicenow catalog on PunchOut procurement site. Servicenow replies with the URL of the Servicenow catalog to which user to be redirected.The PunchOutSetupRequest cXML contains a dynamic URL , to which, Servicenow should browser Form Submit the PunchOutOrderMessage(shopping cart cXML which creates a requisition in punchout procurement application) to when the users shopping session is complete.
The initial "PunchOutSetupRequest" message(cXML) via HTTP POST, I hope to achieve through a scripted REST API message. But I am unsure about how to form submit a catalog item to an external URL. Vendor needs a browser form submit and it cannot be a HTTP POST.

A regular HTML sample page vendor suggests looks like this:

<html>
<body>
<form method=post action="URL in PunchOutSetupRequest Message">
<input type="hidden" name="cxml-urlencoded"   value="<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cXML SYSTEM "http://xml.cXML.org/schemas/cXML/1.1.010/cXML.dtd">
<cXML version=”1.1.010” payloadID=”010-08-26T00:00:00@127.0.0.1” timestamp=”2010-08-
26T00:00:00”>
...details....
</cXML>
">
<input type=submit value="Return Cart to Procurement Application">
</form>
</body>
</html>

How can I achieve this form submit in a Servicenow catalog item on check out?

Labels:
0 Helpfuls
  • 3,099 Views
4 REPLIES 4

Ankur Bawiskar
Tera Patron
Tera Patron

‎12-09-2020 08:48 PM

@tantony 

Are you saying you want to programmatically submit the form?

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls

tantony
Mega Guru

‎12-10-2020 08:09 AM

The buyer login to external punchout procurement app, buyer sees among other suppliers our org's icon, navigates to our servicenow catalog(a dedicated catalog for punchout which do not require a login since buyer is already authenticated in external app), fills out the catalog item form he wants. Buyer checks out. An embedded form in the HTML has a hidden cXML field. The elements of the cXML are the catalog variables like buyer details, quantity, item price etc which need to be programmatically built when the item is checked out . The form 'action' (see above form HTML) contains a unique dynamic URL received from external procurement app when buyer navigated to our catalog. The form with cXML field built is to be submitted to that dynamic URL and buyer is taken back to external procurement app. Ideally this is what the vendor wants.

In a regular HTML form this is straight forward.The submit button and browser does that. But with widgets is it possible to achieve in Servicenow programmatically in a catalog client script? At the same time the usual Request and request item and a flow need to be initiated in our Servicenow instance. 

bobcolegena
Kilo Contributor
In response to tantony

‎02-22-2022 09:58 AM

Hey Tantony,

We're looking for a similar need, did you manage to get that setup?

Greetings,
Bob

0 Helpfuls

tantony
Mega Guru
In response to bobcolegena

‎02-22-2022 12:24 PM 

function onSubmit() {
    //Delay the form submit so that ServicNow request will be created before user is redirected back to Punchout site
    top.window.setTimeout(doDelay, 6000); 
    var form = this.document.createElement("form");
    form.method = "POST";
    form.action = "https://<Dynamic URL in BrowserFormPost Element of PunchOutSetupRequest Message>";
    //I have hardcoded the cXML here for testing, but you will have to create this cXML string programmatically by scripting from the catalog form fields(variables)
    var cxml = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE cXML SYSTEM "http://xml.cXML.org/schemas/cXML/1.1.010/cXML.dtd">
<cXML version="1.1.010" payloadID="[payloadID]" timestamp="YYYY-MM-DD’T’HH:mm:ssZ">
<Header></Header>
<Message deploymentMode="test" or “production”>
<PunchOutOrderMessage>
<--Details omitted-->
</PunchOutOrderMessage>
</Message>
</cXML>';
    var element1 = this.document.createElement("input");
    element1.value = encodeURIComponent(cxml);
    element1.name = "cxml";
    form.appendChild(element1);
    this.document.body.appendChild(form);
    form.submit();

function doDelay(){
	alert("You will be redirected to <PunchOut web site> shortly..");
}

}

 

Bob,

Our requirement changed and we went for a 'Purchase Requisition import' which will allow user to login to ServiceNow and Servicenow via REST directly create a requisiton in punchout vendor's site.

  Above is a catalog client script I tested with some other test site and found working( but never used for production). When customer checkout(submit) the catalog item in Servicenow, the customer will be redirected back to Punchout site at the same time a Request will be created in Servicenow.

I am pretty sure you can get some ideas to develop from there.

 

 

 

 

0 Helpfuls