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.

Image may be NSFW.
Clik here to view. Step-by-Step Procedure

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

Image may be NSFW.
Clik here to view.

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 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 above configurations under sap.app descriptor property something like this below.

Image may be NSFW.
Clik here to view.

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

Also Read:

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Create a new Portal Site

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

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

Portal Content Manager

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

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

20. Launch the Portal site.

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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 Image may be NSFW.
Clik here to view., please share it! Thanks! Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.SAPLearners.com is now on Telegram. Click here to join our channel and stay updated with the latest tutorials and updates.

Like us on Facebook and follow us on Twitter.

The post How to integrate Fiori apps in SAP Cloud Platform Portal appeared first on SAP FREE Tutorials.