Skip to Content
Technical Articles
Author's profile photo Jacky Liu

从BTP Launchpad里的sapui5应用里调用部署的CPI IFLOW

在我的博客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里的代码:


    ["./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("", {
            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 });
                  }).catch( err => (;



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

              <Input id="input"
      description="Hello {/item/name}"



  "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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.