Building Portal Sites on SAP Cloud Platform Cloud Foundry – Consuming Classic UIs and Fiori Apps from S/4HANA system

Beginning of 2019, SAP had updated the “SAP Fiori Deployment Options and System Landscape Recommendations” specifically around the central Fiori Launchpad initiative. This blog is dedicated towards the central Fiori Launchpad concepts – which aims in providing a harmonized UX and enabling users easy access to easy access to SAP and custom apps, services and tasks from on-premise and cloud solutions.  There have been some updates since TechEd 2019 and I am going to cover some of the capabilities especially around consuming apps from an on-premise S/4HANA system.  Please note that the central Fiori Launchpad is only available in SAP Cloud Platform Cloud Foundry environment.

As of today, you can manually refer to applications both Classic UIs as well as Fiori apps from an on-premise S/4HANA system manually. Soon, there will be more options like discovering the contents of S/4HANA system from the central Launchpad as well as provision of a central Inbox to show work items from S/4HANA, SuccessFactors etc. These are all in the new roadmap and hence keep release notes for latest updates on these topics.

This blog will focus on the manual approach to create apps in central Fiori Launchpad which will refer to Classic UIs like WebDynpro and WebGUI as well as Fiori apps which are located within the S/4HANA system.

Setup connectivity to backend S/4HANA system

I wouldn’t go into the details of setting up Cloud Connector or creating Portal site. The links can be found at the end of this blog in the reference tutorials section.

I have setup a Cloud Connector and established a connection with my SAP Cloud Platform subaccount in Cloud Foundry Environment. I have setup a connection to the backend S/4HANA system QKX and given access to all the resources from the root (bad practise).

Within my SAP Cloud Platform Cloud Foundry environment, I can now see that the Cloud Connector is successfully connected.

In the destinations,I have maintained the connection details to the QKX system. For simplicity, I have set the Authentication to Basic Auth. For productive scenarios, this would be Principal Propagation. Notice the additional properties which I have maintained for to enable connectivity to the Classic UIs.

Creating Portal Contents

Within the Portal service, I have create the below objects in the Content Manager. There is an app to display WebDynpro, WebGUI and Fiori application. I have also created one Catalog and a Group called Demo Apps.

Here are my settings for the Fiori App in S/4HANA system. I have used the demo app which comes by default in the S/4HANA system. You can use the Fiori Reference library to find the component name as well as the Semantic intents.

Similarly, I have created a WebDynpro App which refers to a demo WebDynpro ABAP application in the S/4HANA system. You would need to maintain the Application ID and Configuration ID (if exists).

Finally, I used the same approach to create a WebGUI app. You just have to provide a Transaction code. In the below example, I have reference the standard transaction “BP” to maintain Business Partners.

Once the Apps/Catalog/Groups are created, I have assigned the apps to the default role “everyone”. The app will show to all users who are authenticated.

Now its time to test the Fiori Launchpad by launching it from the portal service. As you can see below, the 3 apps are displayed under the group “Demo Apps”.

I can seamlessly access all these app centrally from the launchpad without having to open them in an additional tab. Below are the outputs for each of these apps.

WebDynpro App:

WebGUI App:

Fiori App:

I am still trying to find why this Fiori App didn’t inherit the theme of the central Fiori Launchpad. However, the app works perfectly fine.

Settings required in the S/4HANA system:

To protect against clickjacking attacks, you would need to configure your S/4HANA system. This has been documented in SAP Help “Using a Whitelist for Clickjacking Framing Protection”

You will need to follow the instructions and configure the transaction “UCONCOCKPIT” as stated in the Help documentation.

To find more information on how to integrate apps from an S/4HANA system, follow the steps outlined in SAP Help “Workflow for Integrating Apps”

Reference Tutorials:

• Consume an OData Service Using the Cloud Connector
• Build Your First Portal Site