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

In the previous blog, I walked though the steps to create a HTML5 app in Cloud Foundry and integrate it within the Launchpad service. If you are interested to know how to integrate Classic UIs or Fiori Apps from your on-premise S/4HANA system, you can follow this blog post as the steps are still the same –  Building Portal Sites on SAP Cloud Platform Cloud Foundry – Creating your first portal site. Please note that in the immediate roadmap there are plans to offers automatic content discovery of Fiori Apps within the S/4HANA system. I will update this blog post when its available.

The central Fiori Launchpad is all about providing a harmonized user experience for the end users when performing their day-to-day tasks. Users will be using a combination of SAP and 3^rd party solutions to complete some of their E2E tasks. The Central Fiori Launchpad provides a framework to integrate such 3^rd party applications too. This blog focuses on how we could integrate ServiceNow with the central Fiori Launchpad. You could use the similar approach with any 3^rd party solution as long as they support Cross-origin resource sharing (CORS).

Configuring ServiceNow to enable apps to be embedded within Fiori Launchpad

For demonstration purposes, I have registered for a trial account with ServiceNow and will be using it in this blog post.

One of the first things which need to be done is to disable the Same Origin policy. This will help us to embed ServiceNow apps into the Central Fiori Launchpad. Search for “X_frame_options”

Change the default value from True to False.

If you don’t have the edit option, Use the “Elevate Roles” option in your user profile at the top right hand corner.

Navigate to the Portals menu and look for “Service Portal”.

You can open it and click on “Try it”.

This will launch the Service Portal as shown below. Notice that this portal has a header. If we were to embed this in the central Fiori Launchpad, we need to remove this header to prevent users from seeing multiple headers.

In order to remove this, we need to create our own custom page. Navigate to the pages menu and look for the Index file.

Clone this Index page as we want to work with the existing properties and configuration of this page.

Give it an ID “custom_index” as shown below.

Before you update this page, make sure you remove “Container 1” using the actions. Each element of the page is comprised of containers. Since we do not want the header and the search option, lets remove this container.

Navigate back to the “Portals” menu and create a new entry.

For the Home page property provide the “custom_index” as the page which was created earlier.  For this example, I have provided a URL suffix as “iv”.

Below are some of the configurations which you can copy across from the Service Portal page.

When I test this Portal, it should now launch without the headers. Notice the URL has the suffix “iv”. Copy this URL as it will be required when configuring the launchpad service.

You can follow this developer tutorials to create a central Fiori Launchpad using the new Launchpad service. Once you have your site ready, you can create a URL based App as shown below. Notice that I have maintained the URL, Parameters and also set the property to open “In Place”.

Save the changes and test the central Fiori Launchpad. You should be able to see the new tile in the Launchpad for SeviceNow.

As you can see below, the ServiceNow App is rendered within the Launchpad.

Please note that I have not configured the SSO between ServiceNow and SAP Cloud Platform. It would be required to allow users to smoothly transition to apps across multiple solutions.Happy for someone to contribute that part as an addon to this.

Credits to my colleagues who actually configured ServiceNow for a PoC:

• Changki Lee
• Nicholas Nicoloudis
• Shalini Agrawal
• Jay Adnure

In the next blog post, I will walk you through the steps required to integrate a chatbot in the Central Fiori Launchpad using shell plugins.