Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor
[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 focuses on how you can use SAP Business Application Studio to create a HTML5 app managed by SAP Cloud Platform and integrate it within the central Fiori Launchpad. If you have in the past built Fiori apps which integrated into the Portal service, you would recall the use of Launchpad modules. This is still possible – however the recommend approach going forward for Portal & Launchpad service is to build apps using the managed appRouter option

Its important to note that on the Cloud Foundry environment of SAP Cloud Platform you can now run an application that was uploaded to HTML5 application repository using one of the following options: standalone application router or HTML5 application runtime managed by SAP Cloud Platform. To know more about these options, I would like you to refer to my blog post "HTML5 Applications Managed by SAP Cloud Platform – The new way of developing HTML5 apps"

You can follow all these steps using the Trial environment.


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


Developing HTML5 App using Business Application Studio

Launch SAP Business Application Studio and begin with creating a project from template.

Select “SAP Fiori Freestyle – Project Generator”

Select the environment as “Cloud Foundry” and use the template “SAPUI5 Application”

Give a name for your project

In the HTML5 runtime, change the selected entry from “Standalone Approuter” to “Managed by SAP Cloud Platform” and provide a Managed Service name.

Provide the name and namespace for your HTML5 module

For the view definition, I have selected to add a datasource. For this example, I have already configured SAP ES5 system in my destinations. Here is a tutorial which you can follow to create a destination for SAP ES5 system.

In this step, I have selected the service “GWSAMPLE_BASIC” in the ES5 system.

Once the project is generated, add it to the workspace.

For demonstration, I have added a list control to the view and bind the control to some of the attributes.

We need to manually update the manifest.json file with the CrossNavigation entry. In the future, this may not be necessary as it would be generated during the project creation itself.

With this the project is ready to be Built & Deployed. Use the command to imitate a Build process.

Deploy the .mtar file to your Cloud Foundry subaccount

Once the application is successfully deployed, you will now see in the “HTML5 Applications” menu as shown below. Please note that at the time of posting this blog, this menu is not yet available in trial environments. If you would like to see the deployed apps, please use the command line and issue the command  cf html5-list to list all the deployed HTML5 apps.

You can launch the app from here and test it too.

In the next blog post, I will walk through the steps required to integrate this HTML5 app into a central Fiori Launchpad.

Additional Reading:

If you would like to know how to incorporate CI/CD & Transport Management services to transport this HTML5 app, here is another blog post to check out "Achieve Continuous Integration and Delivery using DevOps services in SAP Cloud Platform".
Labels in this area