How to send multipart/mixed payload to OIC integration from VBCS

We use OIC integrations very frequently as rest in VBCS to fetch and send data to other systems where rest api is not available.

When we call an OIC integration we get body field in the payload.

if we just want to send multipart/form-data (eg. having a single file) or a json payload  in body then it is straight forward.

But sending a file as well as payload in the body is little tricky.

Let us see this in detail.

Let us first see how the OIC integration  trigger is configured to receive the request payload:

 Drag and drop rest adapter trigger  from palette to the canvas and configure like below:

 

 We have enabled review parameters ,however having review and query parameters are optional for this use case:

 

 

 

Select multipart with payload, select json  sample  as request payload format and select media type as multipart/mixed as shown in below screenshot

 

  

Provide the json payload, here we have used inline json.

 

 

Below screenshot shows the endpoint configuration summary.

 

Add other components  in the integration as required , Save it, close and activate the integration with payload. 

 

Now let us see what we need to do in our VBCS application to enable sending multipart/mixed payload to OIC.

Let us take example where user is uploading a file using file picker and we also want to send a JSON payload in body( for ex File name or any other information which will be used in the integration) in the OIC integration call.

Lets have a File picker:

 

In the file picker action chain lets have a variable to store file,this is not  must since since it creates like "Array.prototype.slice.call($event.detail.files)" and we can use the File like: "$variables.files[0]"

Here in our example we will assign the file to a variable of type any :

 

 

$variables.files[0] 

We can get name of the file as:

$page.variables.attachedFile.name

we can get this directly from file var also .

Now lets have a submit button clicking on which an action chain will be triggered.

 

 In the submit button action chain, just before the rest call to OIC integration ,we will call a custom javascript function which will  create request body of multipart/mixed.

Below are the arguments that we pass to the JS function. Here we have hard coded and passed the json object directly to the Function along with file to create the request body but we can create inside function and make dynamic as well.

 

 

Now let us go the function by clicking on "Go to Module Function"

Below is the complete code

define([], function() {

'use strict';

var PageModule = function PageModule() {};

/**

*

* @param {String} arg1

* @return {String}

*/

PageModule.prototype.formdata = function (uploadedFile,jsonPayload) {

var formData=new FormData();

formData.append('files',uploadedFile);

formData.append('data',JSON.stringify(jsonPayload));

return formData;

};

return PageModule;

});

 

 

Out of this our code to create payload is:

PageModule.prototype.formdata = function (uploadedFile,jsonPayload) {

var formData=new FormData();

formData.append('files',uploadedFile);

formData.append('data',JSON.stringify(jsonPayload));

return formData;

};

 

Now after this we will have the rest call to oic integration and we will use this to pass in request body .

 

 

 

The content type will be : multipart/mixed

If we have input parameter in OIC integration then we will map and assign here else it will not be required.

We need to look for mapping the body which is present under parameter.

Let's open by clicking on Assign: 

 

 

 

 We map the response of JS Function to the body of rest call to oic integration.

 Now after doing this let us try testing it.

We can either go to live mode in the vbcs itself or the preview mode to open in new tab of the browser.

While being on the preview mode in browser(eg. chrome) open the developer console to see the 

request payload being sent from vbcs page.

We can go to the network tab and see the request payload for the integration call.

 We can see the payload is of multipart/mixed type. 

 

 

If we see the response header of above , we will get the flow ID of submitted OIC integration.

 

 

 

Now Let us verify the same from OIC integration which got submitted having the above flow id.

lets go to monitoring->integrations->tracking and search for this ID

 

Now let us see the activity stream and the trigger payload.

We ca see that whatever payload we had created from our JS function we are able to see here: