Technical Articles
Build, Deploy and Reuse html5 applications
Typically SAP HTML5 applications are built and deployed into html5 repository. HTML5 applications consist of static content that runs on a browser such as HTML, CSS, JavaScript, and other files. These module can be reused in various ways for end users interaction.
The SAP Business Technology Platform cockpit can act in the roles of a service provider and a service consumer. This blog post is to introduce the configurations into provider and consumer accounts that we often deal with in our development life cycle. I have picked two scenarios to show how easy it is to reuse the html5 content.
Prerequisites
- You’ve created a SAP HTML5 module in SAP Web IDE or using yo generator and deployed it to your SAP Cloud Platform subaccount.
- You’ve basic understanding about provider and consumer account
- Understanding of app host id
You will learn
- How to consume your own developed apps in a SAP Fiori Launchpad
- How to add the html5 content to your own developed application router at cloud foundry
SAP Fiori Launchpad
The launchpad comes with all the capabilities such as adding applications and grouping them, theme managing, roles etc., Let us assume our own developed business service that shares UI is available in provider account.
Note: A business service that provides RESTful service or shares UI is accessed by a consumer. For e.g., As of today we access applications like workflow management is shared by business service. Read more information about integration of business service
STEP 1: Binding process
Business service (that exposes the UI) needs to expose a set of attributes that enable the managed application router to serve business service UI and/or data. Service Broker of the business service is responsible to put app-host-id inside application’s VCAP_SERVICES. The attributes should be defined in the onBind hook in the service broker implementation
cf html5-list
This will list out html5 applications
list of all html5 applications
STEP 2: Creation of service instance in consumer account
Go to consumer account and create a new instance of your business service
STEP 3: Creation of destination in consumer account
Create a destination and select newly created instance.
Go to Destinations -> New Destinations -> Service Instance -> Select your service Instance from dropdown
Verify that your app-host id is listed in app-host id’s field under additional properties or you can verify from the service key of your service instance from View credentials
STEP 4: Subscription to SAP Fiori Launchpad in consumer account
In the side navigation panel of your subaccount, click Subscriptions and enter Launchpad in the search bar. Then on the Launchpad tile, click Go to Application. Check here how to add your application into Launchpad
Fiori Launchpad
Application Router
The application router is used in combination with the XSUAA service to authenticate a user and route the user to the secured application. Read more about this here .
STEP 1: Add app-host id into your user provided service
User provided service enable developers to use services that are not available in the marketplace with their apps running on Cloud Foundry. Usually credentials to connect to DB or app-host Id is shared in it. In our use case ensure to include app-host id
STEP 2: Create service instance and ensure from view credentials your app-host id is visible.
After creation of user provided service instance in a provider account, Ensure to check from view credentials app-host id along with credentials are added
STEP 3: Bind App router
When you bind the app router it will be having information about your html5 application.
STEP 4: Ensure application is being redirected to your html5 application with the app router url
Please capture service value and appId from your manifest.json.
"sap.cloud": {
"public": true,
"service": "com.sap.spa.processautomation"
}
URL is composed of your
<app-router-url>/<service-without-dots>.<appId-without-dots>
Ensure that you are redirected to your html5 application’s index.html with above constructed url.
Summary
We learnt how to consume your own developed apps in a Fiori Launchpad
- Bind html5-apps-repo service instance to service broker application present in the space of a provider account
- Create service instance of business service in consumer account
- Create destination of above service instance and this is ready to consume in Launchpad
We learnt how to add the html5 content to your own developed application router at cloud foundry
- Add app-host id in user provided service
- Bind app-router after creation of user provided service instance
- It is ready to consume while redirecting via app-router
Thank you all for reading this blog 🙂 , I hope it was informative and if you have any question that I can address in the comment section
Hi Deepika Gupta,
Thanks for this blog post. I've been looking for information like this.
It would be great if you could provide sample code. A very simple example will suffice.
Thanks and best regards,
Mio
I hope the documentation here can be updated with some more details and code samples like this post does.
https://help.sap.com/viewer/956efb6db08c450bb303a0d316b72f10/Cloud/en-US/bf7d98cf76df48009d8bc88599b6cd55.html