SAP Build WorkZone – Building UI Integration Card with SAP Build Apps (AppGyver)

What is SAP Build?

SAP build is a combination of different intelligent tools such as SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone advanced edition which helps organizations to create/roll out enterprise applications in no time.

SAP Build Work Zone which helps to create business sites is combined as a package with other tools.  SAP Work Zone enables you to build digital workplace solutions to increase user productivity and engagement. It centralizes access to relevant business applications, processes, information, and communication in a unified entry point that your users can access from any device.

What you will learn?

In this blog, we will explore how can we use SAP Build Apps (Formerly known as AppGyver) to create an application and render it into a UI Integration card of SAP Work Zone. UI Integration Cards allow displaying of business content from various SAP and third-party applications.

Pre-Requisites –

1. Subscription to SAP Build Apps – SAP Build Apps Free Tier Individual Access 
2. SAP S/4HANA oData API access (e.g Purchase requisition) / any oData api of your choice which fits your business needs.

Architecture –

Steps to create a Web application in SAP Build Apps –

1. Open the SAP BUILD lobby and create a web application as shown below –
   
2. Configure oData service under the data section.
3. All data dependencies are set, and we are good to start the UI development and bind the data to the respective components. Before we do, that, let’s disable the navigation and menu option for the application. This will be a full-screen application and will be part of a UI integration card, so doesn’t make sense to have it.
   
4. Create a UI with a List view showing a list of items (e.g. purchase requisitions).
   
5. We are all set to create the build and host it on SAP BTP. Creating a build will take a while as it will be lined up in a queue on the build server, so be patient and have a cup of coffee while it gets ready.
   
6. Once the build is ready you can download the zip file and unzip it, in the next section we will be deploying this application on cloud foundry runtime.

Steps to deploy SAP Build apps on BTP Cloud Foundry –

Unzip the build file and create a manifest file that will include the deployment details. An example is shared below.

---
applications:
- name: appgyvercard
  routes:
    - route: appgyvercard.cfapps.euXX.hana.ondemand.com
  path: ./
  memory: 128M
  buildpack: staticfile_buildpack
  

Open the terminal and log in to your CF account and set the correct org and space and deploy the application.

sudo cf login -a https://api.cf.euXX.hana.ondemand.com

cf push appgyvercard

On the successful deployment of the application, you will be prompted with the application URL, which you have to note as we will be needing it in the next step.

Steps to integrate UI Integration card in SAP Build Work Zone – 

1. You should be the owner of the workspace or create a new workspace to add a UI integration card widget.
2. Add a widget of type web content and enter the web application details. You have to enter the application URL, which we noted before after deploying the application on BTP CF. After this step, you have successfully added a UI Integration card.
   
3. Final SAP Build apps in UI integration card in the workspace –

Bonus – If you are interested to know how you can deploy a web application built using SAP Build Apps, please refer to this blog – BTP Kyma Deployment

Demo –

Conclusion –

Wow!! We just created our first UI Integration card, which displays a web application that is built using the No Code tool without writing a single line of code and integrated into the SAP Build WorkZone. Isn’t it awesome? Please share your thoughts and ideas in the comment section.

Reference link –

Configure Destination – Blog by @Chaitanya Priya Puvvada