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, let’s 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 a 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.

Let’s 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, it’s the same process for all kinds of HTML5 applications.

3. We assume you have already ready with the 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 Action	This defines the navigation intent of the app in the portal launchpad.
Title, Sub Title, Info and icon	Tile 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 the above configurations under sap.app 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. Most importantly, navigate to Provider Manager and you should see HTML5 Apps content provider is added by default.

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 the Content Explorer tab and then click on the HTML5 Apps tile.

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

14. Now, click on the 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 the +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 the Everyone role, but you can create a new role and assign it to the user.

20. Launch the Portal site.

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

Conclusion

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! 🙏

FAQ

Continue Reading

• How to activate and access the new Launchpad service in SAP Cloud Platform