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

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