When we talk about data in the context of Composer apps in AppGyver, we're talking about data that's saved outside of the running app. Typically, this implies the data is accessible via an API online, but it could also be saved locally on the device as client-side storage.
In APIs aspect, SAP provided SAP API Business Hub a collection of very interesting services in business context.
AppGyver provides excellent no-code UI development tools and is built up to provide access to external backend resources.
With a huge assortment of pre-built APIs, SAP API Business Hub easily fills in all the backend gaps in your AppGyver application.
The motivation behind to write this blog post to understand the possibilities of building no code application by using no-code UI development tools and pre built no code APIs.
Prerequisite
This is a more advanced article. It would be ideal if you have already finished reading shibaji.chandra5 excellent blog post or if you could rapidly onboard yourself on AppGyver, by referring mohini.verma handy article.
Doing any of the above, you can easily create an application from the AppGyver project canvas and have ended up in the main section of Composer pro.
Before we begin, I'd want to state that I am assuming you are quite comfortable with Composer Pro. I'll concentrate solely on data integration, demonstrating how to configure a data resource by consuming SAP Business Hub's API utilising Rest API direct integration.
Let’s proceed step by step
Step 1: Get Service APIKey and Service URL
In your browser, open SAP S/4HANA Bank APIs to get the API Overview which we going to use in AppGyver's app.
click on Configuration Details.
In SAP API Business Hub, to test APIs, a sandbox environment (combination of sandbox host URL and API Key) is provisioned as a default API endpoint for every logged in user. In this article we are going to use the sandbox environment:
To take advantage of sandbox environment, you need to log on. Select Login at the top of the page.
Every user is given an API key. This API key is used to authenticate the user against the sandbox system. You can retrieve your API key by choosing Show API Key.
Click on "Copy Key and Close"
Step 2: Configure Data Resource in your App
We must first specify the data source in the application before we can render data dynamically by using any external APIs.
Using AppGyver to get data from an external service is quite simple. We define our data source for data connection with the application, just like most other UI frameworks. Similarly, “Data Variables” are defined in AppGyver.
In your application, click on “Data” section.
Add Resource URL which is the sandbox url copied from SAP API Business Hub and add the HTTP Headers as show below :
Let's start with the "GET" collection method after adding Resource URL Details. We can test our integration by adding an entity set with the base URL to this page.
Click the TEST tab to see if the added entity set is responding correctly then click on SET SCHEMA FROM RESPONSE.
In the next tab(SCHEMA), we can see all the metadata properties added to our data source.
Now click on GET RECORD.
Add Relative path /Bank(BankCountry='{country}',BankInternalID='{internalID}') with URL Placeholder having IsStatic property false.
Click on TEST tab and test whether added entity set is giving the correct response or not.In the next tab(SCHEMA), we can see all the metadata properties added to our data source.
Step 3: Add Data Variable in List page and Detail page.
After you have configured a data resource via the Data section in the global toolbar, you can add a new data variable via the Variables configurator, accessible via the switch at the top of the view canvas, and then selecting Data variables from the menu on the left.
You can add a new data variable onto the current page by clicking the Add data variable button and choosing a data resource from the dropdown.
For Banks List page, choose BanksData data resource with collection type.
Let’s go back to initial view and drag a list control from left panel into our default view and mapped Data Variable properties on UI fields as shown below :
For Bank details page, choose BanksData data resource with Single data recode type
Let’s go back to initial view and drag a UI components titles and paragraphs from left panel into our default view and mapped Data Variable properties on paragraph fields as shown below :
Impression/conclusion
You should now have a basic understanding on how to consume SAP API Business Hub APIs in AppGyver Application and with enormous library of frontend components and pre-built APIs, we will be able to build an application without code!
- SAP Managed Tags:
1 Comment
