Skip to Content
Technical Articles
Author's profile photo Jay Adnure

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

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jan Matthes
      Jan Matthes

      Thanks a lot for sharing Jay Adnure !

      Author's profile photo Pierre COL
      Pierre COL

      Well done Jay Adnure! 👍🏻

      Author's profile photo Martin Pankraz
      Martin Pankraz

      Even more awesome if you send that UI card into a Microsoft Teams channel, right away (linking back to the SAP resources) 😉

      I believe this is the related effort on the SAP side. Any thoughts Jay Adnure?

      KR

      Martin

      Author's profile photo Dario Fracassetti
      Dario Fracassetti

      Very interesting blog!

       

      SAP Build is getting more and more importance.

      To help the Citizen Developers I think that the download of the ZIP from Build and the CLI to deploy the App should be automated (e.g. a click of a button insdide SAP build). Is this functionality in roadmap?

       

      Thanks.

      Dario

       

       

      Author's profile photo Jay Adnure
      Jay Adnure
      Blog Post Author

      Hi Dario Fracassetti - Thank you for your feedback. Yes, this feature is really important, and I feel it should be part of the automated build process feature set. Let me confirm this.

      Author's profile photo FABIO VETTORE
      FABIO VETTORE

      Hi Jay, thanks for sharing this use case. I've just a question: the official documentation describes a different (and simplest ...) way to deploy the applications to CF: just building them as MTAR (instead of ZIP) and running the cf deploy command. In that way there is no need to manually create a manifest file. Is there any difference between the method you described and the one from the official documentation ? Thanks

      Author's profile photo Jay Adnure
      Jay Adnure
      Blog Post Author

      Hi Fabio-

      Thank you for brining this point to discussion. The only difference is how you access the app.

      You can use MTAR and access the application under HTML5 application as mentioned in the document - https://help.sap.com/docs/BUILD_APPS/431746e4c663458aa68d9754b237bfc6/1877222acfbc4aa8b59d6b3a807e1702.html

      I just had this so colleagues who want to know about this process will take reference of this otherwise MTAR is straight forward.

       

      Kr,

      Jay