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.
One of the key highlights of SAP Work Zone is the introduction of SAP UI Integration Cards. It provides a quick and easy way to share business content in a low code declarative manner.
I would highly recommend spending some time exploring the different card types and previewing them in the Explore section. The only file which you need to work on is a manifest.json file. The documentation guides us on the structure which the manifest file needs to contain and its easy to get started and test the changes. Once you have familiarized the different card types and populated them with hard coded data, you can download bundle as a zip file and upload it into Work Zone to see how they render within it.
Obviously, in productive scenarios we would need to deal with live data coming from different source systems. The source system could be a SAP or a non-SAP system, as long as it can provide the business data in a JSON format that can be rendered by the UI Cards.
In this blog post, I show how easy it is to setup a UI Card with business data from SAP and non-SAP system.
For simplicity, I am using the publicly available SAP ES5 system. If you don’t have an account, you can sign up for one. In the SAP Cloud Platform destinations, I have configured a destination pointing to the SAP ES5 system. This destination will be used within the SAP UI Cards.
The process of creating a UI Card has been simplified with Business Application Studio. There is a dedicated extension on developing UI Integration Cards. Ensure that its turned on when creating a space.
Use “Create Project from Template” and select “UI Integration Card”
Follow the wizard and provide details like the Project name, namespace etc. In the card template, you can select from the available template which will give you a structure to work with in your manifest.json file. For this blog post, I have used the List Highlight card.
This will generate a project with a manifest skeleton as shown below.
We need to edit this file to refer to the ES5 destination and also decide which fields/attributes we need to display in this card.
Let me break down this file to explain the different components.
sap.app namespace is required and it needs to have an ID followed with the type as card. You can also set the application versions here.
sap.card holds all the configuration and the last component sap.platform.mobilecards determines if this card can be rendered in mobile cards (mobile app). Within the sap.card section, you have to define configuration, header, data and content sections.
As you can see below, the type of the card has been declared as “List”. In the configuration section, I have defined a name for my destination with the value ES5 (must match the destination name create in SAP Cloud Platform Cockpit).
The header section is used to provide the title/subtitle and an icon to the UI Card.
In the data section, I am referring to the destination name along with the end point of the OData service. Within the parameters, I can provide all the different parameters which can be passed to an OData service. In the below example, I am fetching the top 5 product records for a supplier with an ID 0100000015 and the results for this OData response would be available in the path /d/results.
Here is the response to this OData Query for your reference.
The last section is the content section where we need to define the field/attributes which we need to display in the UI Card. In the Item section, I have defined the Name and Description as the attributes which need to display in the list.
Business Application Studio also provides an option to preview your UI Card. Just use the context menu on the manifest file and select “UI Integration Card Preview”
When ready to deploy, you need to package it using the menu option “UI Integration Card: Package”. This will provide a zip file bundle within the project folder. From here there are two ways to deploy the contents to SAP Work Zone - Direct Deployment and Download/Upload option.
The Direct Deployment option will require a destination to be created to a content repository. Once this is configured, you can use the menu option "UI Integration Card: Deploy to SAP Work Zone". I will explain the steps in the Appendix.
The Download/Upload option is quite easy. Select the zip file and use the context menu to download the bundle.
Similarly, you can create different card types in Business Application Studio referring to data from different source systems. Here is an example of an Analytical card which I have created.
In SAP Work Zone, within the Administration Console, you can upload all the UI Card bundles as shown below.
When you edit page, you will be able to view these UI Cards in the available widget.
I have followed the above process to add two UI Cards in My Workspace.
The complete manifest file can be found in GitHub for your reference.
The UI cards in SAP Work Zone are stored in a content repository. For now, this is the Portal service. Its APIs can be accessed by Business Application Studio to deploy the contents in the repository. The steps to configure this part is well documented in SAP Help.
To begin with you would need to create a service instance of the Portal service and create a service key.
Note down the client ID, secret, URL from the service key and create a destination in the SAP Cloud Platform cockpit as shown below. All the required properties are documented in SAP Help.
Once the destination has been created, you can now use the context menu to select "UI Integration Card: Deploy to SAP Work Zone". This will prompt you for the content repository destination. Select it from the list of options.
You will also be prompted with the message "The new card will be deployed with version X.X.X". Select "Continue". This will deploy the contents within SAP Work Zone.
If you are not comfortable using the code editor and work with JSON notations, you can use the context menu "UI Integration Card: Edit" which will provide you a form based editor to populate the attributes and their values.
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.
One of the key highlights of SAP Work Zone is the introduction of SAP UI Integration Cards. It provides a quick and easy way to share business content in a low code declarative manner.
I would highly recommend spending some time exploring the different card types and previewing them in the Explore section. The only file which you need to work on is a manifest.json file. The documentation guides us on the structure which the manifest file needs to contain and its easy to get started and test the changes. Once you have familiarized the different card types and populated them with hard coded data, you can download bundle as a zip file and upload it into Work Zone to see how they render within it.
Obviously, in productive scenarios we would need to deal with live data coming from different source systems. The source system could be a SAP or a non-SAP system, as long as it can provide the business data in a JSON format that can be rendered by the UI Cards.
In this blog post, I show how easy it is to setup a UI Card with business data from SAP and non-SAP system.
For simplicity, I am using the publicly available SAP ES5 system. If you don’t have an account, you can sign up for one. In the SAP Cloud Platform destinations, I have configured a destination pointing to the SAP ES5 system. This destination will be used within the SAP UI Cards.
The process of creating a UI Card has been simplified with Business Application Studio. There is a dedicated extension on developing UI Integration Cards. Ensure that its turned on when creating a space.
Use “Create Project from Template” and select “UI Integration Card”
Follow the wizard and provide details like the Project name, namespace etc. In the card template, you can select from the available template which will give you a structure to work with in your manifest.json file. For this blog post, I have used the List Highlight card.
This will generate a project with a manifest skeleton as shown below.
We need to edit this file to refer to the ES5 destination and also decide which fields/attributes we need to display in this card.
Let me break down this file to explain the different components.
sap.app namespace is required and it needs to have an ID followed with the type as card. You can also set the application versions here.
"sap.app": {
"id": "ns.SupplierCard",
"type": "card",
"title": "Top 5 Products of Suppliers",
"subTitle": "Robert Brown Entertainment",
"applicationVersion": {
"version": "1.0.0"
}
},
sap.card holds all the configuration and the last component sap.platform.mobilecards determines if this card can be rendered in mobile cards (mobile app). Within the sap.card section, you have to define configuration, header, data and content sections.
As you can see below, the type of the card has been declared as “List”. In the configuration section, I have defined a name for my destination with the value ES5 (must match the destination name create in SAP Cloud Platform Cockpit).
The header section is used to provide the title/subtitle and an icon to the UI Card.
"sap.card": {
"type": "List",
"designtime": "dt/configuration",
"configuration": {
"destinations": {
"myDestination": {
"name": "ES5"
}
}
},
"header": {
"title": "Top 5 Products of Suppliers",
"subTitle": "Robert Brown Entertainment",
"icon": {
"src": "sap-icon://desktop-mobile"
},
"status": {
"text": "3 of 3"
}
},
In the data section, I am referring to the destination name along with the end point of the OData service. Within the parameters, I can provide all the different parameters which can be passed to an OData service. In the below example, I am fetching the top 5 product records for a supplier with an ID 0100000015 and the results for this OData response would be available in the path /d/results.
"data": {
"request": {
"url": "{{destinations.myDestination}}/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet",
"parameters": {
"$filter": "SupplierID eq '0100000015'",
"$orderby": "Price desc",
"$top": "5",
"$format": "json"
},
"withCredentials": true
},
"path": "/d/results"
},
Here is the response to this OData Query for your reference.
The last section is the content section where we need to define the field/attributes which we need to display in the UI Card. In the Item section, I have defined the Name and Description as the attributes which need to display in the list.
"content": {
"data": {
"path": "/d/results"
},
"item": {
"title": "{Name}",
"description": "{Description}",
"highlight": "Information"
}
}
Business Application Studio also provides an option to preview your UI Card. Just use the context menu on the manifest file and select “UI Integration Card Preview”
When ready to deploy, you need to package it using the menu option “UI Integration Card: Package”. This will provide a zip file bundle within the project folder. From here there are two ways to deploy the contents to SAP Work Zone - Direct Deployment and Download/Upload option.
The Direct Deployment option will require a destination to be created to a content repository. Once this is configured, you can use the menu option "UI Integration Card: Deploy to SAP Work Zone". I will explain the steps in the Appendix.
The Download/Upload option is quite easy. Select the zip file and use the context menu to download the bundle.
Similarly, you can create different card types in Business Application Studio referring to data from different source systems. Here is an example of an Analytical card which I have created.
In SAP Work Zone, within the Administration Console, you can upload all the UI Card bundles as shown below.
When you edit page, you will be able to view these UI Cards in the available widget.
I have followed the above process to add two UI Cards in My Workspace.
The complete manifest file can be found in GitHub for your reference.
Direct Deployment Configuration Steps:
The UI cards in SAP Work Zone are stored in a content repository. For now, this is the Portal service. Its APIs can be accessed by Business Application Studio to deploy the contents in the repository. The steps to configure this part is well documented in SAP Help.
To begin with you would need to create a service instance of the Portal service and create a service key.
Note down the client ID, secret, URL from the service key and create a destination in the SAP Cloud Platform cockpit as shown below. All the required properties are documented in SAP Help.
Once the destination has been created, you can now use the context menu to select "UI Integration Card: Deploy to SAP Work Zone". This will prompt you for the content repository destination. Select it from the list of options.
You will also be prompted with the message "The new card will be deployed with version X.X.X". Select "Continue". This will deploy the contents within SAP Work Zone.
Tips on using the Manifest File Editor
If you are not comfortable using the code editor and work with JSON notations, you can use the context menu "UI Integration Card: Edit" which will provide you a form based editor to populate the attributes and their values.
For questions on SAP Work Zone, please raise them in the forums and use the tag “SAP Work Zone”.`
- SAP Managed Tags:
7 Comments
