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
Product and Topic Expert
Product and Topic Expert
0 Kudos
在我的博客Call deployed CPI iflow from BTP sapui5 application by using ajax里,里面的sapui5用的是单独router(路由).如果是BTP Launchpad里的SAP UI5调用CPI Iflow的话,需要对 ajax 或者fetch 里的url 进行调整。下面我演示一下具体的步骤:

步骤 1,在 cpi 里部署一个简单的Iflow ,用https adapter接收 ui5里的调用。可以参照博客 里的step 1 .



步骤 2,在BTP cockpit中为cpi iflow运行时环境创建destination,请参考博客 Step 2



步骤 3, 用 yo 和 easy-ui5生成 Launchpad sapui5 程序:



 

步骤 4, 调整 视图,控制器和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"
}
]
}

步骤 5,运行命令npm run build:mta 和 cf deploy mta_archives/myui5app1_0.0.1.mtar来建造和部署程序到BTP Launchpad里





步骤 6,在Launchpad里进行设置,包括同步应用,分配role, catalog, group .







 

步骤 7, 应用测试:





The end!

Thank you for your time!

Best regards!

Jacky Liu