Technical Articles
Building Portal Sites on SAP Cloud Platform Cloud Foundry – Consuming Classic UIs and Fiori Apps from S/4HANA system
Building Portal Sites on SAP Cloud Platform Cloud Foundry |
Part 1 – Creating your first portal site Part 2 – Understanding the Role Concepts Part 3 – Configuring Identity Provider and Authentication setup Part 4 – 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:
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."
Your wish is my command. I was just too lazy to search for the links 🙂
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
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.
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
Hi Gregor,
This is a Production instance. I have stopped using Trial as it expires frequently.
Did you resolve the issue?
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
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
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?
Hi Aviad,
I'm using FES 3.0 SP04. Yes I'm able to run the app in the ABAP FLP.
Regards,
Ben
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
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.
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!
Export of the portal site is in the immediate roadmap.
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
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
Hello,
What additional properties have you added? Can you flash the URL where the documentation is available?
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.
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
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
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
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
Same problem. I solved it.
this entry must be put in the destination: sap-platform ABAP Regards.
Hi Murali,
you have mentioned:
I have created destination for ES5 system. Created tile for Fiori app in launchpad service. But getting below error:
404 Not found
Please suggest