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.
SAP UI Integration cards can also be used to display business data from 3rd party systems too. If the system exposes OData/REST APIs you can directly consume them within the UI Cards. For seamless integration into 3rd party systems, you can also leverage SAP Open Connectors which is now part of the Cloud Platform Integration Suite. In this blog post, I will demonstrate how to setup a configuration with Hubspot CRM system to obtain the details of leads and opportunities.
To get started, you would need to register for a trial account with Hubspot. There is a tutorial which walks through the steps to register an account with Hubspot and leverage the trial instance of Open Connectors to configure the connection.
The tutorial will guide you on the steps required to create integration keys within Hubspot.
You will need to make a note of the API Key and provide it in Open Connector when creating an instance for Hubspot.
For this demo, I am going to query the Contacts which are available in this CRM system and highlight the key contact using an Object Card (UI Integration Card). You can find examples of how to use Object cards here in Help section.
As you can see below in Open Connectors, the Contacts API provides a list of contacts which will be used to render the data in the object card.
I have followed the steps outlined in the previous blog posts to create a UI card based on the template delivered for an Object card.
Few things to note here.
When dealing with nested structures in the response, ensure you use “/”. For example, when you need to obtain the value for city in the below output, you would need to use {properties/city}
Similarly, you can use conditional operator when you need to resolve a condition. For example, this will highlight the text for Delivery Status based with a green or orange color based on the condition.
I have followed the similar steps as previous blog post and packaged the UI Card and deployed it to SAP Work Zone.
In can now add this as a widget in the pages within Work Zone.
You can follow similar approach when trying to integrate data from other 3rd party systems like Salesforce, Service Now etc.
PS: The source code for this UI Card is available on GitHub.
For questions on SAP Work Zone, please raise them in the forums and use the tag “SAP Work Zone”.`
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.
SAP UI Integration cards can also be used to display business data from 3rd party systems too. If the system exposes OData/REST APIs you can directly consume them within the UI Cards. For seamless integration into 3rd party systems, you can also leverage SAP Open Connectors which is now part of the Cloud Platform Integration Suite. In this blog post, I will demonstrate how to setup a configuration with Hubspot CRM system to obtain the details of leads and opportunities.
To get started, you would need to register for a trial account with Hubspot. There is a tutorial which walks through the steps to register an account with Hubspot and leverage the trial instance of Open Connectors to configure the connection.
The tutorial will guide you on the steps required to create integration keys within Hubspot.
You will need to make a note of the API Key and provide it in Open Connector when creating an instance for Hubspot.
For this demo, I am going to query the Contacts which are available in this CRM system and highlight the key contact using an Object Card (UI Integration Card). You can find examples of how to use Object cards here in Help section.
As you can see below in Open Connectors, the Contacts API provides a list of contacts which will be used to render the data in the object card.
I have followed the steps outlined in the previous blog posts to create a UI card based on the template delivered for an Object card.
Few things to note here.
- The URL here is obtained from the request URL in Open Connectors
- Within the request headers, I have provided the Authorization which I have obtained from the Open Connectors output shown above
- Notice that I have introduced a Where clause within the URL Parameters to restrict the results to a particular record
- The path at the end has a “/0” to pickup the first record (unlike /d/results which we have for standard SAP OData services)
"data": {
"request": {
"headers": {
"Authorization": "User XXXXX, Organization YYYYYY, Element XXX",
"Accept": "application/json",
"Content-Type": "application/json"
},
"url": "https://api.openconnectors.ap10.ext.hana.ondemand.com/elements/api-v2/contacts?where=email='bh@hubspot.com'" },
"path": "/0"
},When dealing with nested structures in the response, ensure you use “/”. For example, when you need to obtain the value for city in the below output, you would need to use {properties/city}
Similarly, you can use conditional operator when you need to resolve a condition. For example, this will highlight the text for Delivery Status based with a green or orange color based on the condition.
{
"title": "Delivery Status ",
"value": "{deliveryStatus}",
"state": "{= ${deliveryStatus } === 'P' ? 'Warning' : 'Success'}"
}I have followed the similar steps as previous blog post and packaged the UI Card and deployed it to SAP Work Zone.
In can now add this as a widget in the pages within Work Zone.
You can follow similar approach when trying to integrate data from other 3rd party systems like Salesforce, Service Now etc.
PS: The source code for this UI Card is available on GitHub.
For questions on SAP Work Zone, please raise them in the forums and use the tag “SAP Work Zone”.`
- SAP Managed Tags:
