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

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


    ["./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"

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

Assigned Tags

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