6. Integrating with BTP – Managing back end calls

Appgyver is a Low-code no-code platform with which you can build apps quickly.

You can refer to my bog Appgyver- Introduction where I tried to put some introduction and SAP’s acquisition of Appgyver.

In the previous blogs I have explained how you can get onboarded in Appgyver, what are the main constitutes of the Appgyver IDE – Composer Pro, We then created our first App in Appgyver, added some validation logic and then we worked on the data source and variable to build a working app.

So far our app is looking like below and it’s operating in local data store.

In this chapter we’ll integrate our app with a back end REST service.

For now I am using the following architecture:

I am using Cloud Application Programming Model aka CAP on SAP Business Technology Platform and connecting it to HANA Cloud Service for persistency. I have built the OData service on top of it using Node.js and have exposed my oData end point as OData V4.

You can follow this tutorials on how to build OData V4 service in CAP Node.js using SAP Business Application Studio.

Note: At this moment I kept this architecture very simple as the app is in prototype stage. So I did not use and MDM solution or any Mobile service broker like mobile service in BTP.

By default CAP does not provide CORS enabled service. However Appgyver platform expects the server to handle CORS. So, we need to tweak our standard CAP service a little bit.

Factoring CORS in OData

One way to fix this is to use the CORS dependency in the CAP call. So, basically we introduced a server.js file here to route all calls through it and added CORS into it.

1. Add CORS Module: npm i cors
2. Next add the server.js file under srv folder: projectRoot > srv > server.js
3. Add CORS module const cors = require(“cors”);
4. Plug in CORS in the routed call: cds.on(“bootstrap”, app => app.use(cors()));

"use strict";

const cds = require("@sap/cds");
const cors = require("cors");

cds.on("bootstrap", app => app.use(cors()));

module.exports = cds.server;

Service Calls

Here is how my services are looking like

GET

POST

PATCH

DELETE

APPGYVER SETUP

Setup Data Source 

Now that we have set the back end OData APIs using CAP, it’s time to set the corresponding data source in Appgyver. For that turn on to your project in Appgyver and go to Data tab and add a new Data source

On the base configuration, add the following:

• Resource ID: ticketService (this will be the name of the data source you need to refer in your app)
• Description: Ticket Service
• Resource URL: https://<service host>/catalog

Next go to GET Record tab and do the following configuration

Relative path: /Tickets

Once this is set go to the Test tab and run a test. The test should show you results like below

Save the data source.

Similarly set the POST and DELETE methods.

For POST go to create record tab add the following:

• Relative Path: /Tickets
• HTTP Header:
  • Key: Content-Type
  • Value: application/json

Also go to the Schema tab and add the schema of the data payload to be posted

Next setup the DELETE method

• Relative path: /Tickets({id})
• URL Placeholder:
  • Label: id
  • Key: id
  • Is Static: No
  • Is optional: No

Create Data variable

Next we need to create a data variable corresponding to the data source.

Note that in our case we have configured the source as single GET call and handled the collection as the single nested object. So we need to define the data variable as single data variable.

Refactor binding

Now that we have updated our data source we need to refactor the binding.

First go to the list item and change the repeat binding to the newly created data source.

Next for create action we need to refactor the binding. For this click on the ‘Create Ticket’ button and open the Logic editor

Make the following changes in the Create record Logic flow

1. Change the Resource to ticketService (the data sources corresponding to REST/OData)
2. Choose the Record properties as custom object > choose Object with properties and map the following using Formula:
   • ID = pageVars.FormData.id
   • desc = pageVars.FormData.desc
   • type = pageVars.FormData.type

The last thing we need to fix is the delete action. For that select the line item and go to the flow logic.

Change the data source and Id binding in the delete record flow logic.

Testing

Now save the project and run it on Appgyver preview. The result is showing as below

You can cross check the results at the back end OData service.

In the next chapter, we’ll see how we can add some mobile native features in the app.

Navigation

< Prev   |   Root   |   Next >