Call deployed CPI iflow from BTP sapui5 application AP 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 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 lauchpad .