Skip to Content
Technical Articles
Author's profile photo Divya Tiwari

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

Have you heard of SAP Workzone for HR?
Have you heard of the SAP UI Integration Cards?
Do you know in SAP Workzone for HR you can create your own SAP UI Integration Card to pull and show personalized content from SAP SuccessFactors?

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

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

  • UI Integration Card development in SAP Workzone for HR – Part 1: In this Blog post I share steps on how to create such an SAP UI Integration card from scratch. (It’s this current blog post)
  • UI Integation 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.

But 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.
  • https://www.sap.com/products/workzone-hr.html?btp=40d68e10-d5fb-4d8d-80ea-23c33ef337fa
  • 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.

In this  blog post  I have decided to show the employee  ToDo items from SAP SuccessFactors instance into a SAP Workzone UI Integration Card. As pre-requisite please refer to SAP Help documentation on SAP Workzone card development and follow the initial setup guide.

Now that you are ready with your  SAP Business Application Studio let us start to create the UI card with the following steps.

  1. Create a destination for accessing the SuccessFactors OData endpoint in the subaccount of your Cloud Platform
    Make sure to add the following properties:
    • HTML5.DynamicDestination: true
    • WebIDEEnabled: true
    • WebIDESystem:”sap_system_id”
    • WebIDEUsage*: odata_genThe service URL must be provided manually in the New Project wizard.Your endpoint URLs for accessing the OData APIs depend on the data center hosting your SAP SuccessFactors instance. Your SAP SuccessFactors support representative can tell you the data center location to use for your instance. For a list of the API Endpoint URL for the SAP SuccessFactors environments, see About HXM Suite OData APIs.Please note that SAP recommends using OAuth instead of HTTP Basic Authentication for accessing customer systems. Available in scenarios in which the Event Connector is used to integrate platform systems with a customer system and where the endpoint is a SOAP API. For the purpose of development testing we are making use of Basic Authentication here.
  2. Create a new project from Template in the Business Application Studio
  3. Choose UI Integration Card and press Start
  4. Enter the Project details
  5. Replace the “sap.card” content with below:
     "sap.card": {
            "type": "Table",
            "configuration": {
                "destinations": {
                    "SFSFDestination": {
                        "name": "SFSFSalesDemo"
                    }
                },
                "parameters": {
                    "maxItems": {
                        "value": 7,
                        "type": "integer"
                    }
                }
            },
            "header": {
                "title": "SuccessFactors",
                "subTitle": "To-Do List",
                "icon": {
                    "src": "sap-icon://compare-7"
                },
                "status": {
                    "text": "Top {{parameters.maxItems}}"
                }
            },
            "content": {
                "data": {
                    "request": {
                        "url": "{{destinations.SFSFDestination}}/TodoEntryV2",
                        "parameters": {
                            "$format": "json",
                            "$expand": "wfRequestNav",
                            "$filter": "categoryId eq 12 or categoryId eq 0 or categoryId eq 19",
                            "$select": "todoEntryId,todoEntryName,linkUrl,wfRequestNav/url,categoryLabel",
                            "$orderby": "categoryId"
                        },
                        "withCredentials": true
                    },
                    "path": "/d/results"
                },
                "maxItems": "{{parameters.maxItems}}",
                "row": {
                    
                    "columns": [
                        {
    						"title": "Item ID",
    						"value": "{todoEntryId}",
    						"width": "15%"
    					},
                        {
                            "title": "Item Name",
                            "value": "{=${categoryLabel}+ ' - ' + ${todoEntryName}}",
                            "url": "{= ${linkUrl} || ${wfRequestNav/url}}",
                            "enabled": "{= ${linkUrl}}",
                            "width": "80%"
                        }
                    ]
                }
            }
        },​
  6. In the card please reference the destination that we created in step 1
    The destination name is used to make the Odata request
    When calling the destination please also make sure to add the property “withCredentials“: true. If you are using a dynamic destination, the XHR request is sent by the card to Cloud Foundry, which needs the session cookie otherwise you are not logged on.
  7. You should now be able to preview your card from the context menu of the manifest.json file as below

Voilà! The UI card is ready for deployment. 

For learning how to deploy the card to SAP Workzone for HR please follow my Blog Post “UI Card development in SAP Workzone for HR – Part 2“.

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.

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pradeep B
      Pradeep B

      Nice article. Thanks!

      Author's profile photo Niladri Bihari Nayak
      Niladri Bihari Nayak

      Awesome post Divya. Looking forward to all upcoming episodes of this blog series.

       

      Keep it up the good work.

       

      Regards,

      Niladri

      Author's profile photo Kajal .
      Kajal .

      Hey Divya!

      I am intern at SAP and have been learning about SAP Workzone. Could you please let me know how to integrate SAP Analytics Cloud and SAP SuccessFactors with Workzone?

      Author's profile photo Thirukumaran Rajendran
      Thirukumaran Rajendran

      Nicely explained

      Author's profile photo Dominick Miller
      Dominick Miller

      Hello Divya,

       

      Have you worked with posting data back to SF through an integration card? It seems the cloud platform destination does not allow POST method to go through.

       

      Thanks,

      Dominick

      Author's profile photo Nathan Hand
      Nathan Hand

      Hi Dominick,

       

      Did you ever get a response on this? Or figure out how to get destinations to POST from WZ?

       

      I'm currently facing this problem in late 2022 so I'd really hope/ expect SAP has sorted out this problem...

       

      Many thanks,

       

      Nathan

      Author's profile photo Arpan Routh
      Arpan Routh

      Very well explained! Really very nice blog.

      Author's profile photo Olga Friesen
      Olga Friesen

      Very nice explanation but it does not work in my case. The card shows the error "unable to load the data". I already found this KBA https://launchpad.support.sap.com/#/notes/0003062218 and tried to apply the suggestions but no success. Anyone out there who can help me?

      Thanks in advance 🙂

      Author's profile photo Divya Tiwari
      Divya Tiwari
      Blog Post Author

      Hi Olga,

      Please make sure the destination you point to is the right one. If you still have issues can you please share more details.

      Regards,

      Divya

      Author's profile photo Lucia Wu
      Lucia Wu

      Hi Divya,

       

      I am very interested in workzone, I created a Work Zone instance and subscribe the Studio in the same subaccount, then create destination.

      but when I deploy an Card, always  show error like the below:

      Deploying the card failed. Reason: Error: Failed to get destinations. Reason: No destinations found.

      could you tell me what configuration I missed?

      Author's profile photo Divya Tiwari
      Divya Tiwari
      Blog Post Author

      Hi Lucia,

      You need to create a destination to the SAP Work Zone content repository for deploying UI Integration cards. You can do this referencing the SAP Help Documentation for 'Creating a Destination to the Content Repository': https://help.sap.com/viewer/7d3b9c7211ca4d7a9630b524205ee836/LATEST/en-US/b058b6314023480194b6dae513e4f035.html

      Regards,

      Divya