Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member746703
Participant
3,090
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 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
2 Comments