Skip to Content
Technical Articles
Author's profile photo Murali Shanmugham

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

Assigned tags

      41 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vladimír Balko
      Vladimír Balko

      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?

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Vladimir,

      I just realized that the HTML5 Apps menu is not yet available in the trial environment. However, I am able to view the deployed apps using the command cf html5-list.  Hopefully its made available soon. Thanks

      Author's profile photo Yuval Morad
      Yuval Morad

      In trial it is missing.

      Try from the terminal in BAS: cf html5-list -u -d

      It is the same result

      Author's profile photo Karthi M R
      Karthi M R

      Thank you Yuval Morad. It is very much needed to get the deployed app URL.

      Author's profile photo Vladimír Balko
      Vladimír Balko

      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.

      Author's profile photo Karthi M R
      Karthi M R

      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?

      Regards,

      Karthi M R.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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.

      Author's profile photo Karthi M R
      Karthi M R

      Thank you so much Murali. I have a good start and I am able to create the portal site successfully with a Hello World app.

       

      Author's profile photo Jason Scott
      Jason Scott

      Hi Murali Shanmugham ,

       

      I've followed a tutorial group which does essentially the same thing as your blog post: https://developers.sap.com/group.appstudio-fiori.html.

      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?

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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 https://answers.sap.com/questions/13144178/run-ui5-app-with-managed-approuter-in-bas.html

      Author's profile photo Jason Scott
      Jason Scott

      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.

      Author's profile photo Pablo Costantini
      Pablo Costantini

      Murali ShanmughamJason Scott

      Which is the purpose of using here the CrossNavigation entry?

       

      Thanks in advance.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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.

      Author's profile photo Neha Parab
      Neha Parab

      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.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Neha,

      Yes, its possible. Check out this documentation. I will try to post a detailed blog. In case, you bump into issues, please post a question in the forum. Thanks.

      Author's profile photo Archana Shukla
      Archana Shukla

      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.

      Author's profile photo Neha Parab
      Neha Parab

      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.

       

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      This is in the roadmap of the Launchpad service. We can hope to see it in Q1.

      Author's profile photo Jhon Jairo Teran Salazar
      Jhon Jairo Teran Salazar

      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.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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

      Author's profile photo Umar Rauf
      Umar Rauf

      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.

      Thanks,

      Umar

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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

      Author's profile photo Antonette Venter
      Antonette Venter

      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?

      Regards

      Antonette

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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

      https://help.sap.com/viewer/8c8e1958338140699bd4811b37b82ece/Cloud/en-US/b695a2432f5c465b83a94e80c9f9cd8e.html

       

      Author's profile photo Umar Rauf
      Umar Rauf

      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.

      Thanks,

      Umar

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Umar, There wasn't any change when I tried this again in the last week of Dec. Can you please raise this as question in the forum. Thanks

      Author's profile photo Umar Rauf
      Umar Rauf

      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
      modules:
      - name: ztest1-destination-content
        type: com.sap.application.content
        requires:
        - name: ztest1-destination-service
          parameters:
            content-target: true
        - name: ztest1_html_repo_host
          parameters:
            service-key:
              name: ztest1_html_repo_host-key
        - name: uaa_ztest1
          parameters:
            service-key:
              name: uaa_ztest1-key
        parameters:
          content:
            instance:
              destinations:
              - Name: ztest1_ztest1_html_repo_host
              ...
      Author's profile photo Anubhav Pandey
      Anubhav Pandey

      Thanks Umar for sharing this. Indeed the issue is resolved with the proposed change.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Thanks for sharing the solution

      Author's profile photo Wolfgang Röckelein
      Wolfgang Röckelein

      Hi Murali Shanmugham ,

      could you clarify when subaccount instead of instance should be necessary?

      What is the actual dfference?

      Would I need subaccount for a shared uaa service?

      Thanks,

      Wolfgang

      Author's profile photo Pablo Costantini
      Pablo Costantini

      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.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Pablo, Looks like something has changed. Can you please raise this as a question in the Forums and we could get an expert respond to it. Thanks

      Author's profile photo Ankur Babu
      Ankur Babu

      Hi @pcostantini_bbt,

      Did you find the solution for this, I am having same issue.

       

      Best regards,

      Ankur

      Author's profile photo mahesh zeple
      mahesh zeple

      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.

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Mahesh,

      I would suggest you open a question in the forum for experts to supports you with this particular issue. Thanks

      Author's profile photo Chowdary Raghu
      Chowdary Raghu

      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,

      Raghu

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Raghu,

      Please check out this Developer Tutorial which explains how to federate Standard Fiori apps from backend S/4HANA system to the Central Fiori launchpad. Thanks

      Author's profile photo Wolfgang Röckelein
      Wolfgang Röckelein

      Hi Murali Shanmugham ,

      how can we as a partner deploy html5 apps this way and make them available to customers, i.e. as a SaaS solution?

      Previously the approuter was deployed with a dependency to saas-registry.

      Thanks,

      Wolfgang

      Author's profile photo Tisha Haria
      Tisha Haria

      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?

       

      Thanks

      Tisha

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi Tisha

       

      Did you manage to find a solution? I also want to deploy to a QA system and have tried different things without success

       

      Thanks

      Author's profile photo Tisha Haria
      Tisha Haria

      Yes. We kept destination name as same for all 3 landscapes