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

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:

 

Assigned tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andre Fischer
      Andre Fischer

      Very informative blog !

      Only one thing I suggest to add. In the beginning you wrote "...Please refer to previous blog posts as these have already been covered on many occasions."

      Here I would add:

      "The links can be found at the end of this blog in the related blogs section."

       

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

      Your wish is my command. I was just too lazy to search for the links 🙂

      Author's profile photo Ratna Rajesh .P
      Ratna Rajesh .P

      Hi Murali,

      Your Blogs are excellent , thanks for the sharing.

      We are working on a scenario where we want to make the Fiori Apps available for external users , i have seen your blogs regarding Identity Provider.

      We still have question that , when we give access to run a Fiori App for some External user who does not have an user in SAP back end system , Which is the sap user would be  used to retrieve the data ,and where do we configure this.

      Thanks in Advance!

      Rajesh P

       

       

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

      Thanks Rajesh. This would be hard to answer without knowing the full context. In general, if external users need access to data from an SAP backend system, they would need to have a user account in the backend. There has been lot of changes in the Indirect access clause with the introduction of the new Digital access. I would suggest, you explore which of those suit your requirements. You will need to ensure that these users have subscriptions covered in SAP Cloud Platform and at the same time have the relevant access rights for the respective backend systems. The SCP destinations is where you will configure the method in which the user's will be authenticated with the backend system. There are few options to explore there.

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Murali,

      have you done this setup in SAP CP Cloud Foundry Production or Trial? I've tried to do this setup in my Trial instance but currently get an "Internal Server Error" when I click the tile and then a call to:

      "/sap/bc/ui2/flp/ui5appruntime.html?sap-ui-app-id=nw.epm.refapps.purchaseorders.approve&sap-startup-params=&sap-client=001&sap-language=en&sap-shell=FLP&sap-theme=sap_fiori_3"

      is issued.

      Best regards
      Gregor

      cc: Aviad Rivlin

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

      Hi Gregor,

      This is a Production instance. I have stopped using Trial as it expires frequently.

      Author's profile photo Tobias Steckenborn
      Tobias Steckenborn

      Did you resolve the issue?

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

      Hello Gregor,

      how did you resolved this? I have same problem - do you know what is that ui5appruntime.html? I get 404 file not found for it.

       

      Vlado

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      Hi Gregor,

      Did you manage to get this resolved? I'm having similar error as yours. File ui2/ushell/ui5appruntime.html NOT found!

      Regards,

      Ben

      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      Gregor Wolf Vladimir Balko, did you manage to solve the issue?

      Yen Shen, Ben Lim, what FES version are you using? When running the apps in the ABAP FLP, is it working as expected?

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      Hi Aviad,

      I'm using FES 3.0 SP04. Yes I'm able to run the app in the ABAP FLP.

      Regards,

      Ben

      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      I am not 100% confident that this is the root cause of the issue, but FES 3 is not support for this scenario. You should have minimum of UI5 1.60: https://help.sap.com/viewer/8c8e1958338140699bd4811b37b82ece/Cloud/en-US/86bacc3e5bbe435d89a4ccf8005d9769.html

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      I've missed out the initial requirement documentation. Thanks for highlighting this Aviad!

      Could you able to help me on another post which using FES6.0?

      https://answers.sap.com/questions/13232670/scp-launchpad-integrating-with-remote-content-prov.html?childToView=13235103#answer-13235103

      Thanks.

      Author's profile photo Mariajose Martinez
      Mariajose Martinez

      Hello Murali!

      Do you know how to export the site? in this new layout of the Site Directory I cannot find the option.

      What I want to do is export the whole code to import it into the Web IDE to make some changes to the portal, as adding and chatbot id channel for example in the html code.

      Thanks in advance!

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

      Export of the portal site is in the immediate roadmap.

      Author's profile photo PhyoPa PaAung
      PhyoPa PaAung

      Hello Murali,

       

      Thanks for your sharing .

      I am the beginner in SCP.

      I create portal site on neo environment and I want to add the S4 hana app in portal .

      Although I connect S4 hana , SCP via cloud connector successfully , my app can't be shown in my site . Would you like to check and follow my question .

      https://answers.sap.com/questions/12962609/cant-show-s4-hana-app-in-sap-cloud-platform-portal.html

       

      Best Regards,

      Phyo

       

      Author's profile photo Kishan Panara
      Kishan Panara

      Hi Murali,

      This is very interesting block. Thank You.

      I am able to get Notification bell Icon on portal sites of cloud foundry. But I want to know about how we can add services and how this notification work.

      If you have some idea can you please share.

       

      Regards,

      Kishan Panara

      Author's profile photo Vijai Mohan
      Vijai Mohan

      Hello,

      What additional properties have you added? Can you flash the URL where the documentation is available?

      Author's profile photo Ashok Kumar M
      Ashok Kumar M

      Hi there,

      If anyone is still getting 'Internal Server Error', ensure your your destination name does not contain any uppercase letters or underscores.

      Best Regards,

      Ashok.

      Author's profile photo David Hayward
      David Hayward

      Thanks Murali, this is just the blog I needed.  I am aware of the frequency of trial accounts expiring, however can you confirm if I will be able to cover the basics via a CF trial account?

      I will be attempting to connect to a backend S/4HANA 1909 system (embedded gateway)

      Thanks

      Author's profile photo Manuel Martinez Fernandez
      Manuel Martinez Fernandez

      Hello Murali Shanmugham

      I have followed your blog but when I look for the available resources from the backend system, the fiori apps do not appear. Only GUI and WDA type apps appear.

      Am I missing any settings?

      Thank you.

      Best regards

      Manuel

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

      Hi Manuel

      I dont understand the issue you are mentioning. When creating Tiles/Apps in the Portal service, you will have to manually provide the properties for WDA or Fiori App. I assume you are not able to see SAPUI5 in the UI Technology drop down? Please post questions in the forum and members will be able to support. Thanks

      Author's profile photo Deviprasad Sahoo
      Deviprasad Sahoo

      Hi Murali,

      After adding the tile in cloud portal and launching the application an additional parameter "cp.portal/ui5appruntime.html" and getting error like 'Not Found' error.

       

      Could you please suggest how can we fix the issue.

       

      Regards,

      Deviprasad

      Author's profile photo Lluis Golet
      Lluis Golet

      Same problem.  I solved it.

       

      this entry must be put in the destination:
      
      
      sap-platform  ABAP
      
      Regards.