Introduction

In my last blog, I shared my personal insights on how SAP is going to position AppGyver in its Business Technology Platform and some other interesting available videos and tutorials for AppGyver.

Eventually, SAP will bring AppGyver into its SAP Business Technology Platform landscape and will be available for customer as new no code development tool offering. Until then we can explore some integration options of AppGyver with external services and make our hands dirty.

In this blog, I will explain how to integrate any open source OData service with AppGyver and  develop a simple list report application using AppGyver. Before we move ahead, I would still recommend to go through any of the below blogs as pre-requisite :

1. Blog by Mohini Verma
2. Blog by Shibaji Chandra

Demonstration:

In AppGyver, once you create an application, by default we get an empty first page:

In order to render data dynamically using an external service, we first have to set data source in the application.

Getting data through an external service in AppGyver is very straight forward. Like most of the other UI framework, we generally define our data source for communication of data with the application. Similarly, in AppGyver we define “Data Variables”.

In your application, click on “Data” section and add base URL as described in the below image :

After adding a base URL, we can use any of the available CRUD operations. Let’s start with the “GET” collection method. Here, we can add an entity set with the base URL and test if our integration is working fine. Follow below steps as mentioned in the screen shot:

Click on “TEST” tab and test whether added entity set is giving the correct response or not. Ideally, it should work if we follow all the correct steps.

In the next tab(SCHEMA), we can see all the metadata properties added to our data source.

In AppGyver, we have various types of variables available. For this example we can use “Data Variables”. Click on “Add Data Variables”, add resource from the available list and save.

Further “Data Variables” properties can be mapped on UI fields. Mostly similar to property binding in UI5.  But here, all you have to do is some clicks and “No Code”.

Let’s go back to initial view and drag a list control from left panel into our default view, as shown below :

This control is just a basic template of list control which requires data binding. In AppGyver’s “List Item”, we can use “repeat with” property for root node binding.

Navigate to – “Select Binding Type>>Data Variables>>Data variable”

Next step is to do property binding, click on “abc” button of primary label and follow steps as shown in the image below:

Follow similar steps for “Secondary label” and bind “price” property with it. Final data bound layout would look like below :

Lets look at the final preview of application, you can also install AppGyver’s app and preview in your phone.

Below is the ugly looking list report which we can still make better by doing some cosmetic changes in the CSS or if we run this on the simulator, but for this demo let it be like this 🙂

In AppGyver, we have lot of UI controls available for use and a component market from where we can import all the available UI components or make our own and publish it.

In my next blog I will demonstrate how to integrate SAP’s backend OData service with an AppGyver application. It would involve SAP Business Technology Platform and SAP Backend.