Call deployed CPI iflow from BTP sapui5 application in build work zone by using fetch

[Jacky_Liu]

In my blog Call deployed CPI iflow from BTP sapui5 application by using ajax , the sapui5 application use stand alone rourter. In a build 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 workzone .

Step 6 , setting up in workzone , then assign role , catalog ,group in build work zone .

 

Step 7, test in build work zone

 

The end!

Thank you for your time!

Best regards!

Jacky Liu