- SAP Managed Tags:
Intro Part 2:
In the previous part we got to know what UI Integration Cards are and how they work in the context of Work Zone (for HR). Since our goal is to build a UI Integration Card that connects live to ServiceNow, we created an instance in Open Connectors pointing to ServiceNow and we got all the necessary information for a get request of incidents. Now it is time to build the actual Integration Card and use the API documentation that we generated.
5. Create a UI Integration Card in Business Application Studio
What are we doing now and why? We have now the standardized API (Curl) that we need to connect towards ServiceNow. In a second step lets create the actual UI Integration Card where we fill in the information that we generated through our get request above.
For this, lets switch back to our SAP Cloud Platform cockpit and go to the Business Application Studio.
Create a new Dev Space where you can develop various kind of applications:
Insert a name for the Dev Space and choose the extensions for SAP Work Zone where you can benefit from several templates of UI Integration Cards:
When your Dev Space is running, open it.
Choose “Create project from template”
Select the template for UI Integration Cards:
Insert the name, card sample (in our case “highlight card”, title and if it should be compatible to mobile):
Now you can choose what kind of view fits best. For the developers among you it is maybe more convenient to open the manifest.json in code view. But since it is my goal in this blogpost to show you that you can also do it via the no-code approach, look at the next screenshot that shows you how to open the editor mode.
Open the editor view as well as the preview for checking your progress immediately.
Now go back to your SNOW Instance in Open Connectors and take the Request URL as well as the Parameter “accept” and “Authorization”.
Insert the Request URL for SNOW under “Data Configuration (Content)” in the section Data Request URL. Take as well the parameter “accept: application/json” and “Authorization: User xxx, Organization xxx, Element xxx” and fill them in in the section “Data Request HTTP Headers” as shown in the picture below.
Depending on how you want to configure your UI Integration Card you can filter for content that should be shown from SNOW. Here I chose the field “number”, “short_description” and “incident_state”. Additionally you can also configure the navigation to specific urls – in our case I embedded the URL of SNOW if a user wants to jump after the preview in the system directly.
Note: Which fields can be chosen from you can find in Open Connectors in the Response Body
After the configuration of the UI Integration Card is finished you can either directly deploy to SAP Work Zone or package it and export as a zip file which then can be downloaded to Work Zone in the Admin Area
6. Access the UI Integration Card connecting to SNOW through SAP Work Zone (for HR):
What are we doing now and why? We just finished our UI Integration Card connecting to SNOW and deployed it directly (or either downloaded & uploaded) to SAP Work Zone (for HR). Now its time to see the result in Work Zone.
For enabling the UI Integration Card you need to have administration right in Work Zone. If so, go in you administration console.
If you didn’t deploy the Card directly to Work Zone, you have here the chance to upload it manually.
Enable the SNOW Card
Now you can add this specific SNOW Card to the workspace as a widget. On top of that you have also the choice to download this UI Integration Card directly as mobile card.
7. Summary
As I mentioned in the beginning a central entry point should provide employees the possibility to see everything that is important for them in one glance. Therefore, UI Integration Cards are key to integrate data from various systems in a user friendly way. You just saw through this example how easy it is to integrate SNOW data to Work Zone (for HR) by using Open Connectors and Business Application Studio – and this without any coding skillset needed.
Of course you can try it out with other 3rd party services e.g. Jira, Google, Facebook, Salesfore and many more.
If you need more information please visit the following sites:
UI Integration Cards:
https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html
SAP Work Zone (for HR) Help Site:
https://help.sap.com/viewer/fec5ca6e3229418f84a932c745cbe985/Cloud/en-US/5c0103b130de411fb2a4b5416e3...
Let me know if you have any questions or comments.
4 Comments
