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

Enhance the Digital Workplace Experience using SAP Work Zone – Integrating Fiori Apps

Note that this asset was drafted & created before our branding changes related to SAP technology were announced on January 2021. Note that SAP Cloud Platform Cockpit was renamed to SAP BTP cockpit.

This blog series will cover some of the key concepts of SAP Work Zone and will also hep you familiarize with the steps required to setup SAP Work Zone and integrate it with UI Cards and applications.

Enhance the Digital Workplace Experience using SAP Work Zone
Part 1 – Setup and configure SAP Work Zone
Part 2 – SAP Work Zone Overview and Components
Part 3 – Developing SAP UI Cards that render SAP business data within SAP Work Zone
Part 4 – Developing SAP UI Cards that render data from 3rd party systems within SAP Work Zone
Part 5 – Integrating Fiori Apps in SAP Work Zone
Part 6 – Integrating SAP Conversational AI based chatbots with SAP Work Zone
Part 7 – Understanding the Admin role concepts

Integrating Fiori apps from SAP Cloud Platform Cloud Foundry environment or on-premise systems has been simplified with the launchpad capabilities which are embedded within SAP Work Zone. In this blog post, I will demonstrate the steps required to integrate a custom Fiori App from Cloud Foundry environment.

Majority of these steps have been covered in some of my previous blog posts

I would also like to point you to a tutorial Integrate a Custom-Developed SAPUI5 App Into Your Launchpad Site which you can follow to create a HTML5 app which is managed by SAP Cloud Platform. Note that you will have to select Managed by SAP Cloud Platform instead of the Standalone Approuter. This is also documented in the tutorial.

I have used the same steps in these tutorials/blogs and referred to the sample OData service “GWSAMPLE_BASIC” in the ES5 system to create a simple Fiori app which displays list of suppliers.

When you deploy this application to Cloud Foundry environment, this will show up in the “HTML5 applications” menu as outlined in my previous blog post. Notice that there are already several Fiori apps which have been deployed to this subaccount during the setup of Work Zone. These Fiori apps are specific to the Workflow Management capabilities. The application which I have deployed from Business Application Studio is ‘nsBPModule’.

Testing the app will bring the list of suppliers from the ES5 system

Follow this process to deploy custom Fiori Apps. The next step is to integrate them within Work Zone.

Navigate to the “Administration Console” and launch the content manager from Business Contents menu.

This will provide access to the Launchpad capabilities which are embedded within Work Zone. Navigate to “Provider Manager” to view the details of the default “HTML5 Apps” provider. You would need to sync to fetch the updated apps.

Navigate to Content Explorer within the “Content Manager” and drill down into the HTML5 apps content provider.

This should list the same applications which you would have also seen in the “HTML5 Applications” menu of the Cloud Foundry subaccount. Select the apps which you need and add them to “My Contents”.

You will now be able to see the custom HTML5 apps in the My Content section. Notice there are many standard Work Zone roles which are available by default. For demonstration, I have created a catalog and group called Inventory and assigned this custom HTML5 app called “Suppliers” to them.

For simplicity, I have assigned this custom app to the default everyone role. This means, anyone who logons to Work Zone would have access to this Fiori Application.

As an end user, when you navigate to the Applications menu in Work Zone, you will now be presented with a Launchpad which has a new group called Inventory and it includes the Suppliers app.

Similar to adding widgets and UI Cards, you can embed these tiles as contents in any of the pages. You can either select individual app or an Application group.

For demonstration, I have added two application groups (side-by-side) as shown below.

Clicking on the Suppliers tile, will take the user to the custom Fiori apps which has been deployed to Cloud Foundry.

For questions on SAP Work Zone, please raise them in the forums and use the tag “SAP Work Zone”.`

Assigned tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.