Building a central Launchpad using SAP Launchpad Service – Integrating HTML5 apps

[Murali_Shanmu]

[Update 2021]: Note that this asset was created before our branding changes related to SAP technology were announced on January 2021. Note that SAP Cloud Platform Launchpad was renamed to SAP Launchpad service, and SAP Cloud Platform Portal was renamed to SAP Cloud Portal service

[Update 2022]: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone). You can learn more in this announcement blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center

 

This blog covers the aspects around how you would integrate a HTML5 app (with managed appRouter) with the Launchpad service. The previous blog post focuses on how the HTML5 application is built using SAP Business Application Studio. The Launchpad service is available in the trial environment and you can get started following the instructions in the blog - “Start your free trial for SAP Cloud Platform Launchpad”. There is a  developer tutorials which will guide you on how to enable the service and setup a basic central Fiori Launchpad using URL tiles/apps.

Building a central Launchpad using SAP Launchpad service on SAP BTP

Part 1 – Getting Started Part 2 – Understanding the options around developing HTML5 apps in Cloud Foundry Part 3 – Developing HTML5 apps Part 4 – Integrating HTML5 apps with the Central Fiori Launchpad Part 5 - Integrating 3rd Party apps with the Central Fiori Launchpad Part 6 - Integrating chatbots with the Central Fiori Launchpad Part 7 - Integrating with remote content providers Part 8 - Enabling Notifications Part 9 - Transporting Launchpad sites using SAP Cloud Transport Management service

 

Once you have enabled the Launchpad service and configured it using the above mentioned tutorials, you should be able to access the Launchpad service and begin the integration of HTML5 apps. Navigate to the “Provider Manager” to fetch the updated contents.

In the Content Manager, navigate to the “Content Explorer” and select “HTML5 Apps”.

Select the HTML5 apps which you want to integrate into the central Fiori Launchpad.

You should now be able to see these HTML5 app as views in the “My Content” section.

 

From here on,  it’s the usual steps which you would follow. I have assigned this app to a Catalog.

I have assigned this HTML app to a Group

Finally assigned this app to “everyone” role

When I access the Launchpad, I should now be able to view the tiles and access the HTML5 apps within the Launchpad shell.

The HTML5 app is able to connect to my backend ES5 system and display the Sales orders. The HTML5 apps also is displayed within the Fiori Launchpad shell.

In the next blog post, I will show you how you could integrate 3rd party applications within the central Fiori Launchpad.