Technical Articles
Call deployed CPI iflow from BTP sapui5 application in build work zone by using fetch
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