Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Jacky_Liu
Advisor
Advisor
In my blog Call deployed CPI iflow from BTP sapui5 application by using ajax , the sapui5 application use stand alone rourter. In a build work zone sapui5, if we need to call a deployed iflow, we need to make a little adjustment in ajax or fetch url in ui5 controller.  I will share the detailed steps :

 

Step 1,  Deploy an iflow in Cloud process integration , please refer to the blog step 1:


Step 2, create destination for  cloud process integration runtime service key in BTP cockpit ,please refer to the blog step 2:


Step 3, Generate Launchpad SAPUI5 with yo and easy-ui5:


Step 4,  Adjust code in view controller and xs-app.json

uimodule/webapp/controller/MainView.controller.js
sap.ui.define(
["./BaseController" , "sap/ui/model/json/JSONModel" , "sap/base/Log"],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller,JSONModel, Log) {
"use strict";

return Controller.extend("com.sap.myui5app1.controller.MainView", {
onInit: function () {},
sendToCpi: function () {
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
const raw = JSON.stringify({
"name": "jacky"
});
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

// eslint-disable-next-line prefer-template
const sUrl = this.getOwnerComponent().getManifestObject()._oBaseUri._string + "cpi/http/ui5/demo";
fetch( sUrl , requestOptions).then( response => response.json() ).then( result => {

const oModel = new JSONModel({ item: result });
this.getView().setModel(oModel);
}).catch( err => ( Log.info(err)));

},
})
});

uimodule/webapp/view/MainView.view.xml
<mvc:View controllerName="com.sap.myui5app1.controller.MainView" xmlns:mvc="sap.ui.core.mvc"  displayBlock="true" xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<VBox id="vbox">
<HBox id="hbox">
<Label id="l1" text="Route Test"/>
<!-- <Text id="name" text="{item.name}"></Text> -->
<Button id="stcpi" text="Send To Cpi" press="sendToCpi" />

<Input id="input"
value="{/item/name}"
description="Hello {/item/name}"
valueLiveUpdate="true"
width="60%"/>

</HBox>
</VBox>
</content>
</Page>
</mvc:View>

uimodule/webapp/xs-app.json
{
"welcomeFile": "/index.html",
"routes": [
{
"source": "^/cpi/(.*)$",
"target": "/$1",
"authenticationType": "xsuaa",
"csrfProtection": false,
"destination": "btpcpisub"
},
{
"source": "^(.*)",
"target": "$1",
"authenticationType": "xsuaa",
"service": "html5-apps-repo-rt"
}
]
}

Step 5 , run command npm run build:mta and cf deploy mta_archives/myui5app1_0.0.1.mtar to build and deploy the application into workzone .



Step 6 , setting up in workzone , then assign role , catalog ,group in build work zone .




 

Step 7, test in build work zone



 

The end!

Thank you for your time!

Best regards!

Jacky Liu
3 Comments