Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Ralph_reinemann
Product and Topic Expert
Product and Topic Expert

Introduction


In today's ever-changing business landscape, the importance of efficient HR service delivery cannot be overstated. The success of an organization depends on the satisfaction and productivity of its employees, which in turn rely on seamless processes and easy access to critical resources. When it comes to HR service delivery customers are looking for forms which can help them to standardize the input of their employees and so make them usable for further (automated) processes.



Goal


Today, we will explore how customers are seeking efficient ways to standardize employee input and make it suitable for automated processes. To achieve this, we will explore the integration of SAP SuccessFactors Work Zone, SAP Customer Experience (Employee Central Service Center), and SAP SuccessFactors. Our ultimate objective is to create a user-friendly UI Integration Card within the SAP SuccessFactors Work Zone. This card will empower employees to submit specific service requests to the service delivery organization in the form of tickets.



Overview Software Components



Series:


This blog post is part of a series


Prerequisites:


In order to complete this tutorial, you will need some basic understanding of the SAP Business technology Platform (BTP), Business Application Studio (BAS) and SAP SuccessFactors Work Zone.


BAS and SAP SuccessFactors Work Zone should be configured so that a direct deployment is possible, but this is not mandatory.


Further Information how to set up the deployment can be found here Link


As ticket system, we will be using is SAP Customer Experience, but you could adapt the following tutorial to any other system providing REST APIs for external communication.


 

Required Software Components


To implement the solution described in this tutorial, you should have access to the BTP Cockpit, BAS, SAP SuccessFactors Work Zone and SAP Customer Experience.




Implementation


During this tutorial, we will impersonate 2 users: the administrator (or technical user) and the end user.


The main effort will reside on the administrator side, who will:




  • configure an SAP SuccessFactors Work Zone UI Integration Card in BAS

  • configure a BTP destination from within the BTP cockpit

  • deploy the UI Integration card


Eventually, the end user will create a ticket through the SAP SuccessFactors Work Zone UI Integration Card.



 



Architectural Overview




Configure UI Integration Card in Workzone


A central aspect of the SAP SuccessFactors Work Zone are UI Integration Cards. These cards can be used to render information from various systems and make them available in the SAP SuccessFactors Work Zone. Adaptive Cards are a specific variant of the UI Integration Cards and help to send information to a backend system.



Figure 1 - UI Integration Card


A comprehensive list and information about UI Integration Cards can be found here.


The configuration and preview of UI Integration Cards is mainly done in BAS.


The BAS will help us in this example to adapt the manifest, get a preview of the card and deploy it finally to the SAP SuccessFactors Work Zone.


In our guide we start with an adaptive card type „Submit Action with Custom Payload.


Open BAS, create a New Project from Template and select the UI Integration Card.



Figure 2 - Business Application Studio


Click start and give your project a name, for instance „TicketSubmission”.


Give the project a namespace, for instance the name of the company you work for.


Select the Submit Action Card sample.


Give the project a title and subtitle, for instance “Create Ticket”.
Select finish and your project will be created.



Figure 3 – New Project from Template in Business Application Studio


You can see a bunch of files that have been generated. Especially the manifest.json is important since it defines the behavior of the card.


Right-click on the manifest.json file and select UI Integration Card: Preview.


In the preview you’ll see how the card will look like whenever you make changes to it in the manifest.



Figure 5 - Preview of the card


The next steps will be to connect the card to the target system, SAP Customer Experience. This requires some configuration that we’ll now do.


 

SAP Customer Experience/ Employee Central Service Center


To establish an inbound communication channel via OData API in the SAP Customer Experience we need to perform the following actions:




  • Create Communication System

  • Create Communication Arrangement & Authentication Method


Create communication System


First go to your Administrator site of your SAP Customer Experience system



Figure 6 - SAP Customer Experience Admin Area


Find the communication system and arrangements in the area of integration.


Create a new communication system.


Give it a meaningful ID and host name such as “IntegrationCard”.


The System Access Type should be “Internet”.


On the right hand side click on Save and then on Actions and Set to active.



Figure 7- SAP Customer Experience Communication Systems


 

Create Communication Arrangement & Authentication Method


Create a new Communication Arrangement and select OData Services for Business Objects as communication scenario.



Figure 8 - SAP Customer Experience Communication Arrangement


Click Next at the bottom of the screen and select the communication system you just created.



Figure 9 - SAP Customer Experience Communication Arrangement


Click Next.


Set the Authentication Method to User ID and Password.


Right to the User ID field, click on Edit Credentials and enter the password for the user. Click OK when done.


Note the user and the password. You’ll need them later for the SAP BTP Destination Service.


Now select Ticket from the list of services used.



Figure 10 - SAP Customer Experience Communication Arrangement


Click Next, review your Arrangement and click on Finish.


For the next step, please save the URL of the OData Service from your communication arrangement.


To do so, locate your communication arrangement from the list by sorting the Changed On column in a descending order. You should now see your communication arrangement at the top.



Figure 11 - SAP Customer Experience Communication Arrangement


Open it by clicking on it.


Now click on the link next to ticket Odata Service.



Figure 12 - SAP Customer Experience Communication Arrangement


Copy the URL and replace the “$metadata” path with “ServiceRequestCollection”.



Figure 13 - SAP Customer Experience Communication Arrangement


Your URL should look something like this:


https://<your_id>.crm.ondemand.com/sap/c4c/odata/v1/ticket/ServiceRequestCollection


 


Save this URL fort he next steps.


Further information about Communication Systems and Arrangement can be found here.


The initial setup for the inbound communication of the SAP Customer Experience is now finished. A communication system, arrangement and user has been created. Next step is to connect the SAP Customer Experience with the UI Integration Card through the BTP destination.




BTP Destinations


BTP Destinations can be understood as the central communication hub of the BTP, be it internal or external. In ourtutorial the destinations work as man in the middle between the UI Integration Card and the SAP Customer Experience.


Further information about the BTP Destination Service can be found here.


Go to your  BTP subaccount cockpit and Select Destinations in the menu.


Create a new destination and fill in the required information from your SAP Customer Experience.



Figure 14 - Create BTP Destination


Give the destination a name, for instance “SAPCX”, select HTTP as Type and fill in the URL endpoint you copied previously:


https://<your_id>.crm.ondemand.com/sap/c4c/odata/v1/ticket/ServiceRequestCollection


Specify the Authentication to be BasicAuthentication and fill in the user and the password you copied previously fromyour Communication Arrangement.


Specify Additional Properties as follows:




  • DynamicDestination: true

  • WebIDEEnabled: true

  • WebIDEUsage: odata_gen



Figure 15 - BTP Destination


Save your destination.


If you check the connection the response should be positive, ie. „200: OK“.



Figure 16 - BTP Success Message




Business Application Studio (BAS)


After we successfully created the connection between the SAP Customer Experience and the BTP Destination Service we can now configure the UI Integration card.


First, we need to define the destination in the card manifest, bind it to the action handler and map the relevant fields to the payload.


Switch back to your BAS project, open your manifest.json file and adapt the sap.card section as follows:




  • Add your previously created destination to the sap.card section:


            "destinations": {

"SAPCX": {

"name": "SAPCX"

}

}


  • Replace the actionHandler as follows:


"actionHandlers": {

"submit": {

"url": "{{destinations.SAPCX}}/ ",

"method": "POST",

"headers": {

"Content-Type":"application/json"

},

"parameters": {

"Name": "{form>/Subject}"

},

"withCredentials": true

}

}

The end result look something like this:



Figure 17 - Overview UI Integration Card


The card can now communicate with the SAP Customer Experience through the SAP BTP destination. When submitting the UI Card data to CX Service Cloud, we configured the “Subject” element to be sent as parameter. Hence we need to change the user interface to add the “Subject” field and discard the unnecessary ones.


Note: this is the minimum setting in my SAP Customer Experience system – the final payload might vary. In case you need additional fields, please add them as needed.




  • In the sap.card section, change the body of the content section as follows:


    "body": [

{

"type": "Input.Text",

"placeholder": "Your request goes here",

"label": "Please specify your Request",

"isRequired": true,

"isMultiline": true,

"style": "text",

"id": "Subject"

}

]

Also, your Preview should look like this:



Figure 18 - Preview of the adapted card


 

Testing


After we successfully deployed the UI Integration Card to our SAP SuccessFactors Work Zone environment, we can start testing it.


Log in as Administrator to the Work Zone and enable the card in the Administration console.



Figure 19 - SuccessFactors WorkZone Admin Area


Add the card e.g. to your workspace and create the ticket.



Figure 20 - Deployed Card


Get the positive result and see your ticket in the SAP Customer Experience Ticket Overview.



Figure 21 - Deployed Card - SuccessMessage



Figure 22 - Created Ticket in SAP Service Cloud


 


Summary


In this tutorial it was shown how to connect an SAP Service Cloud application to the SAP SuccessFactors Work Zone to empower employees to submit specific service requests to the service delivery organization in the form of tickets.


The creation of a ticket can now be gently done from the SAP SuccessFactors Work Zone vie a UI Integration Card consuming the BTP Destination service and finally posting against the SAP Service Cloud.


2 Comments
rcaziraghi
Participant
0 Kudos
Hello ralph_reinemann ,

Thank you for the insightful post on integrating SAP SuccessFactors Work Zone with SAP Employee Central Service Center. Very interesting use case for a UI Card.

I am particularly interested in understanding how the scenario described in your post would work with a POST request containing a JSON payload. Specifically, could you elaborate on how the manifest file would look like in a POST request sent with data extracted from the card?

Looking forward to your insights on this.

Best regards,

Rafael
Ralph_reinemann
Product and Topic Expert
Product and Topic Expert
Hi Rafael,

Here you go. This article is about the user identification for the target application

https://blogs.sap.com/2023/12/13/realize-service-delivery-with-sap-successfactors-work-zone-and-sap-...

 

Best,

Ralph