Skip to Content
Technical Articles

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

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

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

Part 7 – Integrating with remote content providers


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.

        • The CrossNavigation is required to provide the Intent/SemanticObject declaration. Without this, the app will not have a Tile visualization in the Content Manager and hence wouldn't show up in the Fiori Launchpad as a tile.

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


  • Hi Murali Shanmugham

    I'm having problems to do the deploy of fiori elements application to scp in order to register it in SCP Launchpad service, first of all because in the fiori elements application wizard there is not such option to choose standalone approuter or approuter managed by scp, besides the project structure doesn't include mta file to build and deploy, so I'm a little bit consused here.


    Please can you give me some guidance.

    Thank you in advanced.

    Jhon Jairo.

    • Hi Jhon Jairo,

      I had someone else report the same issue with Fiori Elements. Can you please raise a question in the forum. We can have an expert respond to your query. Thanks

  • Hi Murali,

    Thanks for the great blog! A couple of questions:

    1. I am able to deploy an app and pull it into a Portal Site via Content Explorer > Explore option. However, in my situation I need to setup a couple of tiles for the same app with different params. What's the best way to achieve that? Since the app was assigned to the Portal via Explore option, the app properties can't be changed. I tried setting up multiple inbound intents in manifest; however, the Content Explore still pulls a single intent/tile definition.
    2. Once the app is deployed, is it possible to change the app datasource destination from system A to system B. In Neo env this was straight forward; however, can't seem to find a similar feature in CF env.



    • Hi Umar,

      Currently it is not possible to define multiple intents nor visualizations (tiles) for one business application. This is in the roadmap. Today, the only way to achieve the flow of 2 different tiles launching the same application is by defining the application twice (with different intents).

      With regard to your second question, I am not aware of an easy way to switch the destination. Can you please post this as a question in the forum. I am sure there will be experts to give you some ideas. Thanks

  • Hi Murali,

    Thanks for a great blog.

    In scenarios where we do need a standalone app router, what can we do to ensure it is listed in the HTML5 repo? For example an MTA/CAP app or a complex shell plugin that requires an app router. What would the process be to get these apps/plugins to show in the content provider for Launchpad service?



    • Hi Antonette,

      I dont think you will be able to see them in the Content Provider. However, there should be a way to integrate apps deployed with Standalone approuter with the Launchpad service. May be you could try these steps


  • Hi Murali,

    Is there a change to to apps developed using "Approuter Managed by SAP Cloud Platform" option? Previously, such apps automatically generated a couple of destinations (UAA and AppHost) under the sub-account. However now when I try to do the same, the destinations are not generated plus I'm unable to see/add the deployed app to the launchpad via the Content Explorer.



      • Found the problem. Apparently there is an issue with the mta.yaml generated for "Approuter Managed by SAP Cloud Platform" apps in the latest ver of BAS. Under the params for the destination module, the instance: should have been subaccount:


        _schema-version: "3.2"
        ID: ztest1
        version: 0.0.1
        - name: ztest1-destination-content
          - name: ztest1-destination-service
              content-target: true
          - name: ztest1_html_repo_host
                name: ztest1_html_repo_host-key
          - name: uaa_ztest1
                name: uaa_ztest1-key
                - Name: ztest1_ztest1_html_repo_host
  • Hi Murali Shanmugham


    I am not been able to see the html5 apps deployed in my cloud foundry space, even following your own tutorial.

    Furthermore, there is a strange situation in the terminal of cloud foundry, when i use the command cf html5-list for taking a view of the deployed apps.

    As you can see, there isn’t a name and the visibility is “-“.

    On the other hand, the services instances were created and they are all running:

    Do anyone knows is happening?

    Thanks in advance.

  • Hi Murali,


    I tried deploying a CAP project based UI5 module in the same way you explained here. It got deployed and i was able to host it on cloud launchpad service as well. However, the SRV Layer service which we are trying to integrate within application, is not getting accessed from launchpad. Its showing 404 error. When it run it in Run Config, the same app works fine.

    Any suggestions here.


    Thanks ,

    Mahesh Z.

  • Hello Murali!!

    Thank you for the great blog.

    I have a question. How to configure Standard Fiori Apps to BTP Launchpad Service. How to assign Roles & Authorizations?


    Kind Regards,


  • Hi Murali,

    While developing UI5 app you selected for example ES5 here for dev and now for example there is backend system ES6 for quality how do I deploy and change the destination system?