Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Participant
0 Kudos
“When the winds of change blow, some people build walls and others build windmills.“

-Unknown, An ancient Chinese proverb


Dear friends, wish you all a very happy and wonderful new year. As i said in the last part, in this, we will deploy an sapui5 application for managing our test cases. Developing sapui5 applications with SAP business application studio (BAS) is both fun and functionality. BAS is SAP Ide for building applications for SAP BTP including sapui5, cap full stack, workflow applications and so on. For this part, let us take a different route and use local development tools for SAPUI5 development. Let us get started.

Previous parts:

If you did not check the previous parts, i suggest to go through them to understand the story. Below are the links for them


Previous blogs Link
Part3 - Integration suite extension - Payload storage in Azure blob storage Part3
Part2 - Integration suite extension - Persistence in HANA cloud Part2
Part1 - Integration suite extension - Introduction Part1
Part0.1 - Integration suite extension - Message Monitor Overview Part0.1
Part0.2 - Integration suite extension - Enhanced user defined message search Part0.2


Architecture Diagram:


Local development tooling:

There are few tools you need to install for developing sapui5 apps using local development tools like VS code. Below are the steps and the documentation for installing these tools.

Install Cloud Foundry cli:

Install Cloud Foundry cli plugin - mta:

Install Cloud Foundry cli plugin – html5 apps repository:

Install Yeoman:

Install easy-ui5 generator:

Install MTA Build Tool:


Start your SAPUI5 project using Yeoman

Start the yeoman generator for new sapui5 project and answer questions based on the project requirement.

> yo easy-ui5 project

What do you want to do? Create a new OpenUI5/SAPUI5 project [app]
How do you want to name this project? integrationsuiteextensionapp1
namespace do you want to use? com.vravipati
which platform would you like to host the application? SAP Launchpad service
Which view type do you want to use? XML
Where should your UI5 libs be served from? Content delivery network (SAPUI5)
Would you like to create a new directory for the project? Yes


It generates the project structure for you. This tool is great for setup of sapui5 projects which otherwise can be error prone if done by hand.



I do not want to go in to full details of implementation as this part can go very long 🙂 . But will give an overview of few of the implementation aspects. If you would like to check, the repo is available below.

JSON models are used to consume data from the backend apis which are implemented as REST apis. You can check part3 if you want to see more on the backend implementation.

All the service calls to backend are implemented in integration-suite-service below. These include service calls to

  • get list of integration scenarios

  • get list of testcases

  • load new test case to backend

  • get testcase payload


Couple of fragments are implemented (like below) for

  • creating a test case

  • displaying payload data


Build the SAPUI5 app

Build the sapui5 project using

npm install
npm run build:mta


This builds the project and bundles it as a multi-target archive (.mtar) for deploying to BTP.


Deploy the SAPUI5 app

Deploy the app using

npm run deploy:cf


It does few things

  • provisions all the required resources mentioned in mta.yaml in our BTP subaccount

  • deploys our .mtar bundle (i.e our sapuiui5 project here) to BTP. To be more specific, this deploys our sapui5 app to the html5 apps repository of BTP to be able use in SAP BTP launchpad.

Running the App:

App URL:

This opens up home page with list of testcases



We can a test case by clicking on + (Add test case button)



Select scenario name from the list of available integration scenarios in integration suite, give testcase a name and description, give http method (get/ post/ put) and upload the payload.



Our new testcase is loaded to backend.



The payload link gets the display view of payload information stored in azure blob storage.




In this we implemented the app to manage our test cases. I hope you find this useful for some of your implementations. Please feel free to share your feedback and comments.

Labels in this area