Skip to Content
Technical Articles

Building a central Launchpad using SAP Cloud Platform Launchpad service – Developing HTML5 apps

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 Cloud Platform Launchpad

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


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“.

You must be Logged on to comment or reply to a post.
  • Hello Murali,

    I tried to create my own html5 app according to your blog and everything went fine. My app is deployed, but I dont have HTML5 Applications page on my subaccount. Am I missing something?

  • Hmmm, weird, that they took it away. Somebody know the reason?

    But anyway, I like that new option to deploy – I always had that feeling, that I dont like to create app router just to serve that one app. This centralized SaaS app router is nice option for these cases.

    Of course, if you have more complex development, the custom app router is also fine to have.

  • Hello Murali,

    Can you please explain about “SAP Cloud Platform Managed Service Name” in step “HTML5 Applications Runtime” of creation wizard. Is it possible to setup one like this for CF Trial accounts?


    Karthi M R.

    • It can be any name. Think of it as a name you are giving for the app router which SAP would manage. You could try all of this in the trial landscape. Please note that the HTML5 apps menu is not visible in the trial environment at the moment. You can see the response in the above comments.

  • Hi Murali Shanmugham ,


    I’ve followed a tutorial group which does essentially the same thing as your blog post:

    I’ve noticed a slight difference though – in the tutorial they “bind the destination” in the BAS (in the run configuration). You don’t seem to do that above. Wondering why not?

    If I remove the binding then I can’t run the app from BAS.


    Also – following the tutorial I can run the app in BAS and it pulls data from the ES5 data source just fine. However once deployed to CF as a SAP managed HTML5 application I get a http500 on ES5. I’m wondering if we *should not* do the binding as described in the tutorial.


    Any ideas?

    • Hi Jason,

      I had a look at the tutorial. Though its similar to the blog post there are few minor differences. For example, I have selected the Managed by SAP Cloud Platform option and towards the end added the CrossNavigation section manually.

      I didn’t test the app locally in BAS. I deployed it and tested the app from the cockpit. If I were to do so, I would need to follow the steps in that tutorial – and bind the app to dependencies like the destination. This is required only to run the app locally within BAS.

      There was a question raised in the forum where the deployed app worked fine but it wouldn’t launch within BAS. May be it would give you some pointers

      • Thanks. I have updated that thread.  😉


        I have since found that the app can actually access the backend (ES5) service just fine – but only when you run the app from within the portal service.

        If you run the app outside the portal – it seems that it is not bound to the destination instance so cannot access the data (http500).

        I’ll keep researching why this is the case but I think its because it is the actual Launchpad service that provides the approuter for these “managed by sap” html5 apps.

  • Hi Murali,

    Can we integrate standard workflow capabilities (like My Inbox, Monitor Workflows Definition, Monitor Workflows Instances) and rule management service with the launchpad service. If yes, please let me know how.

      • Hello Neha,

        You can currently add these standard applications in your Launchpad like any other application with intent and navigation. For this you have to create an app-router with dependency on workflow service instance, then create a destination with this app-router, and then create an App in Launchpad based on system and add the given intent-navigation (look here | Step 11) for these workflow applications.

        Note: Going forward (v soon) we will release a seamless integration of workflow applications with Launchpad.

  • Thanks Murali and Archana,I have done all the steps as you suggested.

    Step 1 – Created mta application with approuter, fiori, workflow, launchpad module and deployed it.

    Step 2 – Created destination with this approuter.

    Step 3 – Created My Inbox app in launchpad based on this destination.

    It worked.

    But , my problem is for approuter to work I need to give portal service instance in its requires section, otherwise it doesn’t work. But , our project wants to use only launchpad service, so I cannot keep any dependency on portal service for the workflow instance. Is there a possibility for the same?

    I am checking this in my trial account with Sap Business Application Studio.