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

[Jacky_Liu]

在我的博客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