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

HTML5 Applications Managed by SAP Cloud Platform – The new way of developing HTML5 apps

[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

 

There were plenty of changes in SAP Cloud Platform since last month. Some of the services were renamed or superseded with new services. You will most of the updates in the “SAP Cloud Platform Service Description Guide”. Some of these have direct impact on the decisions which need to be made when developing HTML5 applications which are accessed via a Fiori Launchpad on SAP Cloud Platform. This has been one of the most common discussions I have been having in the last few weeks. In this blog, I hope to clear some of the confusions and outline the available options when developing HTML5 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

 

Application Runtime:

When developing HTML5 applications in SAP Cloud Platform (Cloud Foundry environment), you always needed a subscription to “SAP Cloud Platform Application Runtime”. This not only allows you to deploy HTML5 apps, but also apps based on nodejs, Java, Python etc.

Few weeks back, there was an announcement of a new service called “SAP Cloud Platform Extension Factory, Application Runtime” which supersedes this service. That is a long name for a service.

So what’s the difference. Some of the key aspects have been documented in this blog post “Redesigned SAP Cloud Platform Extension Factory, application runtime“. It was mainly around the simplification of this service across all hyperscalers. What you would notice, is that the new service includes some of the underlying capabilities without any quota restrictions (as shown below).

When you build and deploy your HTML5 apps, these apps are usually accessed via an application router. These apps get deployed within the space of a subaccount. In the “Applications” menu, you will be able to see the application routers which will help consume the contents which are deployed into the HTML5 application repository.

As per the documentation – “An application router serves static content from HTML5 application repository, authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user information. “

When you navigate to the “Service Instances” you will be able to see the HTML5 Application Repository along with the connectivity & destinations which are used by the application.

This is an approach which we have been following to build HTML5 applications for a while.

 

HTML5 Applications Managed by SAP Cloud Platform

Recently, SAP introduced a new option to build HTML5 apps.  With this new option, you no longer have to deploy your apps with your own application router. Its all managed by SAP as a service.

As per the documentation, here are the benefits of using this approach.

  • Simplify and speed up your development and deployment experience
  • Save resources by running a serverless HTML5 application, which doesn’t require any application runtime
  • Lower maintenance efforts by leveraging the most up-to-date routing capabilities
  • Meet the changing demand for HTML5 applications by automatically adjusting the service to maintain consistent and predictable performance

SAP recommends using the standalone Application Router only in advanced cases, for example when application router extensibility is required.

Note that applications which are deployed using this method will no longer show up within the spaces. This will be in the “HTML5 Applications” menu at the subaccount level.

Most importantly – to use the “HTML5 Applications Managed by SAP Cloud Platform”, you need to subscribe to either SAP Cloud Platform Portal service or a new service called “SAP Cloud Platform Launchpad service”.

Going forward, as part of new engagements – if you are going to either build new HTML5 apps or leverage a Fiori Launchpad on SAP Cloud Platform – ensure you have the below services:

  • SAP Cloud Platform Launchpad service
  • SAP Business Applications Studio
  • Bandwidth
  • Custom Domains (Optional)

In the next blog post, I will walk you through the steps which are required to develop a HTML5 app managed by SAP Cloud Platform and how it can be integrated into a central Fiori Launchpad.

 

Assigned Tags

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

      Thank you for the blog post. I have been telling to myself, why are that HTML5 Applications tab on subaccount level and couldn`t find any info how to make them appear there.

      I thought that it has to do something with the SaaS service to exposure that app.

       

      Author's profile photo Jeremy Chabert
      Jeremy Chabert

      Thank you for this blog post.

      I was wondering how I could put my HTML5 app at the subaccount level as I was seeing the section in the left panel.

      Now I have my answer !

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

      I had the same questions as most of you 🙂

      Author's profile photo Ishita Shah
      Ishita Shah

      HI Murali,

      Thanks you for the blog and step by step process of understanding how to build the central launchpad.My question here is, I am not able to see my HTML5 application deployed as "Standalone Approuter",on could foundry in Launchpad Content Provider.As you mentioned i need to change the Approuter as "Managed by SAP  Cloud Platform ", but how can i change it in my existing application.Please guide.

       

      Thanks

      Ishita

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

      Hi Ishita,

      Can you please raise this as a question in the forum. We can have an expert support your question. Thanks

      Author's profile photo Mikko Mäkelä
      Mikko Mäkelä

      Hi Murali,

      This was a great blog.

      We have two Fiori HTML5 applications in Launchpad up and running. Our customer wants to use Custom Domain to make it more easier to remember the Launchpad URL also in internal marketing etc.

      Since Fiori Apps can be seen under subaccount in HTML5 Applications, we don't have anything under Spaces. But still Custom Domain requires applications to be available under Spaces. When trying to Map the Fiori application to Custom Domain I get error Application not Found.

      So as a summary with this approach we are only able to create Custom Domain to all other types of applications except Fiori HTML5. Is this correct assumption?

      So far I have not found a good example how and why would anyone need to use Custom Domain if Launchpad is in use. Nor have I found any example how to map launchpad URL to Custom Domain.

      Thanks,

      Br

      Mikko

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

      Hi Mikko,

      Thanks. I think the best way is to configure custom domain for the Launchpad site. I am pretty sure its possible. Can you please raise this as  a question in the forums.

      Did you check this SAP Help documentation.

      Thanks

      Author's profile photo Johannes Bacher
      Johannes Bacher

      Hi Murali,

      thank you for the blog.

      One question: I always thought that when we do side-by-side extensions (Apps) for S/4HANA Cloud, that these Apps will be developed in SCP and then also run there, and will be "somehow" integrated into the S/4HANA Cloud Launchpad.

      Now I found this guide which describes, that you can deploy your app directly to the UI5 ABAP Repository of the S/4HANA Cloud System. The app would then not run in SCP?

      https://help.sap.com/viewer/841f379acd104dbf8685b3ad26e66af3/SHIP/en-US/eb4fdebfa9e442ea96b725fa4f894ae3.html

       

      Can you explain this? I think it would be a major change to be able to deploy to the S4HC backend system.

       

      Thank you

      Johannes

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

      Hi Johannes,

      I haven't been following the updates on the S/4HANA Cloud. As per this guide, you can deploy the app directly to the backend system.

      One of the challenges which I have heard from S4HC customer is that extension apps are built in a FLP on Cloud Platform and the remaining standard apps are in S4HC FLP. May be this feature was introduced to support a unified access.

      Also, for S/4HANA systems, I see there is now an option to also consume custom Fiori apps deployed on Cloud Platform within the S/4HANA FLP. https://help.sap.com/viewer/ad4b9f0b14b0458cad9bd27bf435637d/Cloud/en-US/48ff1b03f65f4661b642255881c5e890.html

      Author's profile photo Smita Thorat
      Smita Thorat

      Hi Murali,

      Thanks for the elaborated blog. Really helpful.

      We have developed and deployed an Fiori Application - Freestyle UI5 Application through BAS.

      We are using Managed Approuter. The deployed application is visible in the Cloud Foundry - Space - Instances with (Destination, AppHost, Authorization app).

      But this Application is not visible in Subaccount HTML5 repository or Space - Application repository and neither in Portal Service - Content Provider (saas-approuter).

      We need to add this deployed app to our Portal service at subaccount level and as the application/router not available in any TML5 repository we are not able to add the app.

      Can you please advise if any imp step is missed here which will integrate the application from the Instance to the HTML5 repository (Specially the subaccount HTML5 repository or Content Explorer of portal service)?

      Thanks,

      Smita Thorat

      Author's profile photo Andreas Mazzola
      Andreas Mazzola

      Hi Murali,

      thank you very much for this great block.
      I have a further question and maybe you could help.

      We just implemented HTML5 applications in BTP Cloud Foundry as a Multitarget application and with XSUAA enabled.

      We also deployed the application with the "Managed Application Router" option.

      Now we want to activate Authentication and Authorization for the application but couldn't find any solution.
      We found the following documentation, but it seems it's only working for usage with own application router.
      https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/0a69484539d64567ba17269f6e5ba88d.html

      So the question is how it's possible to secure a html5 app with a managed application router ?

      Best regards,
      Andreas

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

      Hi Andreas,

      Thanks. Would you be able to raise this as a question in the forum please.

      Author's profile photo Krishna Kammaje
      Krishna Kammaje

      Thanks, Murali for the document. What do you mean by 'Bandwidth' as the required service? Is this a service on BTP?

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

      Yes, its a service on BTP. Please check out the service description guide https://www.sap.com/about/agreements/policies/cloud-platform.html

      Author's profile photo Jae-Hoon Chung
      Jae-Hoon Chung

      Hi, Expert ~

      Thanks for this best blog.

       

      I have a question that I wish you could help.

      Our team uses BTP but we use neo subaccount.

       

      I faced a problem, It does not appear in the site manager when transferring new HTML5 applications.

      How to resolve this problem.  Pls help me ~~

       

      refer to below our system environment.

      - DEV, QA, PROD : neo subaccount

      - Cloud Transport Service : Cloud Foundry

      . using service : CTransport Management Service

      - system configure reference Link :

      https://help.sap.com/viewer/ea72206b834e4ace9cd834feed6c0e09/Cloud/en-US/905baea4d6c7404290bff6c042184b4e.html

       

       

      Best regards

       

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

      Hi Jae-Hoon Chung, Can you please raise this as a question in the forum. We can have an expert support your question. Thanks