UI Integration Card to S/4 on SAP Build Work Zone Standard Version

[AlexDong]

I recently read the blog post New Site Experience with Spaces and Pages is available for SAP Build Work Zone, standard edition and got interested into how it works. I don't think there is a better way except "make hands dirty". So I spent some time and now I can see the cards come out into SAP Build Work Zone, standard version.

Static and Data Cards

Prerequisites

1. You have basic understanding to SAP BTP. (If not please read my blog post "Beginner Level Understanding on SAP BTP Architecture")


2. You have admin access to SAP Build Work Zone standard version.


3. You have already set up the connection to your SAP S/4 HANA system via SAP Cloud Connector and build up the destination to one API e.g. /sap/opu/odata/sap/api_product_srv.

Steps

Now let us do it. (Don't worry, not complicated :D)

1. First of all I read through the blog post mentioned above, but this is not a hands-on guide. Luckily there is a Github repository handling this.


2. Clone it into your own IDE like SAP Business Application Studio or Visual Studio Code. Make sure you check out the "cdm" branch. Here is the code structure, which is easy to understand.You cannot deploy the integration card directly. The cards, roles, space, workpage etc. need to be included into "content package" and the content package will be used to upload into SAP Build Work Zone standard version. The files under "content-package" are used to generate such content pacakge zip file. You see there are already some content package samples, but let's build our own and make just some small modifications.


3. Open "content.json" file. This is the file to generate content package zip file. You can see roles, space, workpage and card configurations in this file. Each configuration block corresponds to one json file and you can check the details. E.g. role1.json will specify what space and apps can be seen by the role
   
   
   
   "my.company.ns.contentpackage.role1". The same applies to space and workpage. For cards, let's replace "static-list-card-sample" to "data-list-card-sample" as the following screenshot shows.This is not finished yet. Open "role1.json" under "cdm-samples/src" and replace static card ID to data list card ID under "apps" property as the following screeshot shows. Open "workpage1.json" file and change the static id from static one to data list card, as the following screenshot shows.You can understand what we are doing - to specify which cards will be under which space and which role.
   
   


4. Still you have to change card configurations so that it can extract information from SAP S/4 HANA system. Let's say you have already built up the destination in BTP to your SAP S/4 HANA system and the destination name is "he4_alex_product".Afterwards, this destination will be consumed into manifest.json file under "list-card-samples/data-list-card-sample". Copy and replace the following code block to your "sap.card" section.
   

   "sap.card": {
   
       "type": "List",
   
       "configuration": {
   
         "destinations": {
   
           "myDestination": {
   
             "name": "he4_alex_product"
   
           }
   
         },
   
         "parameters": {
   
           "maxItems": {
   
             "value": 10,
   
             "type": "integer"
   
           }
   
         }
   
       },
   
       "header": {
   
         "title": "{{DYNAMIC_LIST_CARDTITLE}}",
   
         "subTitle": "{{DYNAMIC_LIST_CARDSUBTITLE}}",
   
         "icon": {
   
           "src": "sap-icon://product"
   
         }
   
       },
   
       "content": {
   
         "data": {
   
           "request": {
   
             "url": "{{destinations.myDestination}}/A_Product",
   
             "parameters": {
   
               "$format": "json",
   
               "$top": "{parameters>/maxItems/value}"
   
             }
   
           },
   
           "path": "/d/results"
   
         },
   
         "item": {
   
           "title": "{Product}",
   
           "description": "{NetWeight} {WeightUnit}",
   
           "highlight": "{= ${IsMarkedForDeletion} ? 'Error' : 'Success'}"
   
         }
   
       }
   
     }​

   
   


5. Now start a terminal console, go into "content-package" folder and run command "npm install". Afterwards, run "npm run build-all" and you can see some job will be running for a while. Finally you can see a file called "package.zip" is generated. And this file is the one we need to upload into SAP Build Work Zone.


6. Open SAP Build Work Zone instance and go into "Channel Manager". Click "New" button and select "Content Package".Now upload the "package.zip" file and select the destination e.g. "he4_alex_product" in my case. Keep other as default and click "save" button. Once successful, go into "Content Manager" and click "Content Explorer" button.Select the content package we just uploaded and inside there you can find the role we just specified.Check it and click "Add". Which means the role has been added to SAP BTP.


7. Go to "Site Directory" and select your own site. Click settings button and then click edit, add the role to your own site.


8. Go to your SAP BTP cockpit and go into your own subaccount. Select "Users" under "Security" and assign this role collection to yourself.


9. Finally open you site and you can see the card come out, retrieve the product list from backend system, i.e. your SAP S/4 HANA system. All it looks like is just a reflection of those configurations inside the content package zip file.

Summary

SAP BTP is a powerful platform to extend your core ERP and HR process and it is generally evolving into "Low Code No Code" direction. SAP Build Work Zone is definitely getting consolidated with UI Integration Card. As you can see, still you have to be familiar with some development basics and I believe product team will make this process simpler via some mouse clicks to make our life easier.