从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里的代码：

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里