Trigger CPI iFlows from Fiori/SAPUI5 application

By /

With SAP BTP side-by-side extensibility is taking the centre stage along with the Integration Suite of BTP, triggering iFlows from a frontend application is raging. We came across such a scenario and we were searching for some of the blogs and answers from our community. Luckily we found some from some of our contributors, however not all the informations are provided in one place that a developer who is very new to BTP is looking for.

I am trying to present as much as information possible in a simple and step-by-step manner for better usage.

Below are the steps we need to follow.

  1. Create a destination for the Integration Suite in BTP cockpit
  2. Get the Integration suite URL and oAuth Authentication URL
  3. Use the Client ID and Client Secret in the destination.
  4. Create a MTA application in BAS
  5. Create a Fiori application of your choice of template based on needs inside the MTA.
  6. Update the xs-app.json with the destination we have created for Integration Suite
  7. Design and code the UI and controller for the business logic to trigger the iFlow.

Above steps conclude the a Simple UI5 application to trigger an iFlow with endpoint configured.

 

Destination Creation in the BTP cockpit

Destination%20Creation%20for%20Integration%20Suite

Destination Creation for Integration Suite

 

For the URL and Token Service URL please open the Instance and Subscription and go to Instances.

Open the Service Keys for the Integration-flow

 

URL%20for%20oAuth

URL for oAuth

 

After configuring the destination, please check the connection and it will return 404 along with successful connection. That’s alright and no need to worry.

 

Now its time to Generate the MTA app and Fiori app inside the same.

Assuming you have done the same and now lets go to xs-app.json file.

 

xs-app%20json%20file%20update

xs-app json file update

 

Highlighted is the configuration we need to make.

 

Now after your business logic is done whenever you want to trigger the iFlow, use the below code.

var myHeaders = new Headers();
              myHeaders.append("Content-Type", "application/json");
              var requestOptions = {
                method: 'GET',
                redirect: 'follow'
              };
              const sUrl = _that.getOwnerComponent().getManifestObject()._oBaseUri._string + "cpi/http/OFI_SubProcess3";
              fetch(sUrl, requestOptions)
                .then(response => response.text())
                .then(result => _that.getView().byId("_IDGenTextArea1").setText(result))
                .catch(error => console.log('error', error));

 

“cpi/  => is the destination name we have provided in the xs-app.json

 

http/OFI_SubProcess3” => is what you find in the endpoint url of the iflow.

 

Deploy the application and allow it for few minutes for the cache to be update and all set in BTP.

Happy triggering the iFlow from app.

Please let me know your feedback.

Scroll to Top