Technical Articles

September 11, 2020 4 minute read

Building a central Launchpad using SAP Launchpad Service – 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

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

44 Comments

You must be Logged on to comment or reply to a post.

Vladimír Balko

September 11, 2020 at 11:00 am

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?

Murali Shanmugham

Blog Post Author

September 12, 2020 at 9:06 pm

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

Yuval Morad

September 13, 2020 at 1:00 pm

In trial it is missing.

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

It is the same result

Karthi M R

September 21, 2020 at 2:40 pm

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

Vladimír Balko

September 14, 2020 at 7:06 am

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.

Karthi M R

September 18, 2020 at 6:06 am

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.

Murali Shanmugham

Blog Post Author

September 18, 2020 at 8:10 am

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.

Karthi M R

September 21, 2020 at 2:37 pm

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.

Jason Scott

September 25, 2020 at 3:54 am

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?

Murali Shanmugham

Blog Post Author

September 25, 2020 at 6:48 am

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

Jason Scott

September 25, 2020 at 6:57 am

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.

Pablo Costantini

January 18, 2021 at 2:50 pm

Murali Shanmugham Jason Scott

Which is the purpose of using here the CrossNavigation entry?

Thanks in advance.

Murali Shanmugham

Blog Post Author

January 18, 2021 at 10:14 pm

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.

Neha Rane

September 28, 2020 at 7:55 am

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.

Murali Shanmugham

Blog Post Author

September 28, 2020 at 8:42 am

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.

Archana Shukla

September 28, 2020 at 9:46 am

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.

Neha Rane

September 29, 2020 at 6:37 pm

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.

Murali Shanmugham

Blog Post Author

December 11, 2020 at 9:57 am

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

Jhon Jairo Teran Salazar

October 19, 2020 at 4:11 pm

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.

Murali Shanmugham

Blog Post Author

November 25, 2020 at 10:50 am

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

Umar Rauf

October 29, 2020 at 3:43 am

Hi Murali,

Thanks for the great blog! A couple of questions:

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

Murali Shanmugham

Blog Post Author

November 25, 2020 at 12:02 pm

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

Antonette Venter

December 1, 2020 at 1:24 pm

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

Murali Shanmugham

Blog Post Author

December 3, 2020 at 7:58 pm

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

Umar Rauf

January 11, 2021 at 11:47 pm

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

Murali Shanmugham

Blog Post Author

January 12, 2021 at 1:54 am

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

Umar Rauf

January 12, 2021 at 5:07 am

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

Anubhav Pandey

January 12, 2021 at 5:52 am

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

Murali Shanmugham

Blog Post Author

January 18, 2021 at 10:10 pm

Thanks for sharing the solution

Wolfgang Röckelein

March 22, 2021 at 1:59 pm

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

Pablo Costantini

January 20, 2021 at 9:59 pm

Hi Murali Shanmugham

Anubhav Pandey

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.

Murali Shanmugham

Blog Post Author

January 22, 2021 at 2:40 am

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

Ankur Babu

September 13, 2021 at 1:59 pm

Hi @pcostantini_bbt,

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

Best regards,

Ankur

mahesh zeple

February 26, 2021 at 11:03 am

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.

Murali Shanmugham

Blog Post Author

March 10, 2021 at 1:21 am

Hi Mahesh,

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

Nagandla Raghu Ram

March 3, 2021 at 4:46 pm

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

Murali Shanmugham

Blog Post Author

March 10, 2021 at 1:23 am

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

Wolfgang Röckelein

March 22, 2021 at 2:05 pm

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

Tisha Haria

April 30, 2021 at 12:56 pm

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

Timothy Muchena

August 22, 2021 at 12:33 pm

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

Tisha Haria

September 8, 2021 at 5:50 pm

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

Luiz Gomes

October 12, 2022 at 6:53 pm

On press F5 result in not found error,

Urvi Mehta

November 3, 2023 at 5:04 am

Hello Murali Shanmugham - Thanks for the blog.

I am new to the HTML5 app building on SAP BTP and trying to configure the custom domain for our app. Our app is 'Managed app router by SAP build Work Zone, standard edition'. I do not find any guideline on how to map-route the HTML5 app to the custom domain configured using SAP Custom domain service.

There are examples out there to configure custom domains for MTE SaaS apps, or Custom apps in CF (but nothing relevant for HTML5 app).

If you can shed some light on generally how the HTML5 apps can be configured to decipher route information, that would be very helpful.

Thank you!

Murali Shanmugham

Blog Post Author

November 6, 2023 at 10:49 am

Hi Urvi,

I have not configured custom domains recently. I would suggest to post this as a question in the Forum to see if there are experts available to provide some guidance. Thanks

Technical Articles

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

Developing HTML5 App using Business Application Studio

Assigned Tags