Integration suite extension - Part 4 – Develop your SAPUI5 apps locally - Manage test cases app

[former_member184876]

“When the winds of change blow, some people build walls and others build windmills.“

-Unknown, An ancient Chinese proverb

Introduction

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:

https://docs.cloudfoundry.org/cf-cli/install-go-cli.html

Install Cloud Foundry cli plugin - mta:

https://developers.sap.com/tutorials/cp-cf-install-cliplugin-mta.html

Install Cloud Foundry cli plugin – html5 apps repository:

https://developers.sap.com/tutorials/cp-cf-install-cliplugin-html5.html

Install Yeoman:

https://developers.sap.com/tutorials/cp-cf-sapui5-local-setup.html

Install easy-ui5 generator:

https://developers.sap.com/tutorials/cp-cf-sapui5-local-setup.html

Install MTA Build Tool:

https://developers.sap.com/tutorials/cp-cf-sapui5-local-setup.html

 

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



Questions:

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.

 

Implementation:

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.

https://github.com/ravipativenu/com.vravipati.integrationsuiteextensionapp1

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:

https://681769b2trial.launchpad.cfapps.us10.hana.ondemand.com/eeae75b1-b8c0-46bb-a11b-af2681415ba8.i...

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.

 

 

Conclusion:

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.