How to integrate Fiori apps in SAP Cloud Platform Portal


Dear SAPLearners, in this blog post we will learn how to integrate fiori apps in SAP Cloud Platform Portal.

Before going into further details, lets understand about Portal service in SAP Cloud Platform and its features.

What is SAP Cloud Platform Portal?

A role-based, multi-channel and central point of entry for employees, customers, and partners to access business apps. It is available as subscription service in the Cloud Foundry and Neo environments.

We can access business apps and content from SAP Cloud Platform and also from other SAP products like S/4 HANA. More overs content from other providers can also be accessed from Portal.

We can integrate different types of apps like SAPUI5, SAP GUI for HTML, Web Dynpro ABAP in SCP Portal.

Lets look into the steps to integrate fiori apps in SAP Cloud Platform Portal.

📚 Step-by-Step Procedure

1. Log On to SAP Cloud Platform Cloud Foundry environment. Navigate to Subscriptions and subscribe for Portal service.

2. Meanwhile, to expose fiori apps in Portal we need to add launchpad information to the manifest.json file. In fact its same process for all kind of HTML5 applications.

3. We assume you have already ready with fiori app, if not we recommend you to create, build and deploy the fiori app by following this tutorial.

Configure the manifest.json file

4. Navigate to manifest.json file of the fiori app and add below launchpad configurations.

Semantic Object and ActionThis defines the navigation intent of the app in the portal launchpad.
Title, Sub Title, Info and iconTile visualization properties
"crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    "semanticObject": "portalDemo",
                    "action": "display",
                    "title": "Fiori App",
                    "info": "running in Portal",
                    "subTitle": "my subtitle",
                    "icon": "sap-icon://account"

5. Add above configurations under descriptor property something like this below.

6. Finally, build and deploy the fiori app to SCP Cloud Foundry.

Also Read: How to build and deploy Fiori App in SAP Cloud Platform Cloud Foundry.

7. After that, launch the Portal service in SAP Cloud Platform Cloud Foundry.

8. Mostly importantly, navigate to Provider Manager and you should see HTML5 Apps content provider is added by default.

💡 Note: Click on Refresh button under Actions when ever you deploy new Fiori application to SAP Cloud Foundry HTML5 App Repository

Create a new Portal Site

9. Click on Create Site button and provide the site name. A new portal site is created successfully.

11. After that, click on Pages from the navigation menu and then click on Take me to the Content Manager button to add the content. You can also directly navigate to Content Manager from the left navigation menu.

Portal Content Manager

12. Under Content Manager, select Content Explorer tab and then click on HTML5 Apps tile.

13. Select the fiori app from the list and click Add to My Content button to the add the app to the apps to subaccount.

14. Now, click on My Content tab and you will see the fiori app available in the list. Click on it to see the app details.

15. You can see the details like Properties, Navigation, Visualization and Translation of our fiori app.

16. After that create a new Catalog, Group by using +New button.

17. Navigate to the Group. Under Assignments, place the cursor on the search input field to add the fiori app to the group.

18. Repeat the same and add the fiori app to the Catalog also.

19. Finally assign the fiori app to the role. In this example i am assigning the app to Everyone role, but you can create new role and assign to the user.

20. Launch the Portal site.

21. Hurrah !!!! we have successfully integrated fiori app to Portal.


Congrats!! you have successfully learned the steps to integrate fiori apps in SCP Portal. Please feel free to comment and let us know your feedback. Subscribe for more updates.

If you liked it ❤️, please share it! Thanks! 🙏


1. HTML5 Application is not visible for assignment in SCP Portal?

Access the Provider Manager and click on Fetch update content to get up-to-date content.

Continue Reading