UI Integration Card development in SAP Workzone for HR – Part 2

SAP Workzone for HR allows you to create your own SAP UI Integration cards/widgets and add it to your pages and workspaces. In my opinion it’s an incredible idea to be able to view personalized content from multiple domains on one screen. This sort of an aggregation provides an intuitive employee experience with the insight to the employees need to do their jobs better and more efficiently from a single digital workplace hub.This blog post is part 2 of my Blog on UI Card SAP Workzone for HR.

This Blog Series UI Integration card development in SAP Workzone for HR  has 2 parts :

• SAP Workzone for HR – Create a UI Integration  card – Part 1: In this Blog post I share steps on how to easily create such an SAP UI Integration card from scratch.
• UI Integration Card Development in SAP Workzone for HR – Part 2: In this Blog post I share steps to deploy the UI card to SAP Workzone for HR

First a little introduction on the technologies involved 🙂

• SAP Work Zone for HR enables organizations to provide employees with an intuitive, personalized digital workplace that’s centered on optimizing the employee experience. Employees are empowered to be productive anywhere, thanks to convenient access to relevant business applications and processes, information, learning, and more. SAP Work Zone for HR also centralizes employee communications and provides collaboration capabilities, helping ensure people are informed, connected, and focused on what matters most.
• 
• SAP UI Integration Cards are Integration cards that present a new means to expose application content to the end user in a unified way. Depending on the use cases cards can be easily embedded in a host environment, such as application, dashboard, or any HTML page. A variety of card types can be configured by a simple JSON configuration (schema) without the need to write code for UI rendering. In this way, even users without programming skill are being enabled to create new cards according to their special needs.
• SAP Business Application Studio provides you tools to create and deploy your own SAP UI Integration Card for SAP Work Zone.

For deploying the UI card into SAP Workzone for HR please follow the following steps:

1. You need to setup the SAP Workzone destination as per the documentation available at SAP Help documentation. Once you have your workzone destinations maintained in SAP Cloud Foundry you deploy by navigating to the card project that contains the required UI card. Right-click on manifest.json file in the selected card project and choose ‘UI Integration Card: Deploy to SAP Workzone’.

   Alternatively you can deploy by exporting the card package.To do this right-click on manifest.json file in the selected card project and choose UI Integration Card: Package. Now the UI card is packaged in a <card id>.zip file. Then, right-click the <card id>.zip file and select Download to download the zip file. The UI card is available in the downloaded file. You can use this zip file to upload the UI card to SAP WorkZone from the Adminstration Console. To upload the file please follow the steps numbered on the screen below.After uploading enable the card and you should be able to see the card available for selection in your workspace.

2. Go to the workspace or page where you want to add the card/widget and press enter page settings. In the screen below we add our widget to the Homepage in SAP Workzone.
3. Now press edit
   
4. Now on the page press Add Widget button where you want to add the your UI Card
   
5. On the popup scroll down in the widget section to find your Cards and widget section and click on it to make selection
   
6. In the next popup you can change your configuration if you need and press Add button
   You now have your UI card added to your homepage/workspace
7. Scroll back up on the page to find and click the publish button

And Voilà! You now have your UI card added to the home page in SAP Workzone.

I hope this blog post was helpful and easy to follow. I look forward to recieving your comments  and feedback. If you feel you need more information on any of the topics covered here please also comment below.