“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? YesIt 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:mtaThis 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:cfIt 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.
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.
- SAP Managed Tags:
