Skip to Content
Technical Articles
Author's profile photo Deepika Gupta

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

When you bind an application to a service, the service puts some attributes to the VCAP_SERVICES of the application. Ensure that service html5-apps-repo with app-host plan of your application is binded with the service broker in provider account.
You can verify the html5-apps-repo service name and app-host id for your application from a command after login to subaccount
cf html5-list

This will list out html5 applications

list%20of%20all%20html5%20applications

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%20Launchpad

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

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mio Yasutake
      Mio Yasutake

      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

      Author's profile photo Kevin Hu
      Kevin Hu

      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