Let me share my learnings on SAP Build apps for connecting a public API by parsing URL from screen inputs .
SAP Build Apps is a no-code app builder tool which helps us to develop enterprise-grade applications for desktop, browser, and mobile at a faster pace.
In this tutorial we will build an application using AppGyver community edition (also referred as SAP Build Apps ) .
For today we will build an exchange rate converter application by consuming public API .
Thanks to
https://Exchangerate.host as they provide
open API for getting exchange rates dynamically .
After building this application we will be able to know
- How to consume a Restful API's in SAP build app
- Passing screen inputs to API place holders.
- Binding the results back to screen.
Once we are aware of consuming any open API's it will be same play with our real time business cases like getting a Purchase order / Sales order details etc..
Will start building our application ...
As a prerequisite create user account by signing to AppGyver platform.
🔗https://platform.appgyver.com/
After login to application click on
CREATE NEW
Create New App
- Provide your application name you will directed to UI Canvas ,on Left side of the tool we can see all the UI & right side we can define properties of the screen elements .
APP development Interface
- We will add a Title & two input field elements.
- In the latter step we define a data variable for holding the input data & further this input values are parsed to URI.
- Desired properties can be defined for each element of the screen . .
Create UI Elements
- On top of the tool, you can find toggle tool where we can switch between views & data variables.
- Now we will switch to variable & define three App variables, two of them will hold screen input values (Form & To currency codes) and the other one for storing the API result.
- We can define different kind of variables like APP variables (Variable data can be accessed throughout the App), Page variables (variable data can be access with in the defined page)
Define Variables
Add App Variables
- Once we define data variable, we will navigate to DATA tab where we define our backend data source .
- For our application it’s a REST API direct Integration & our source of data will be a public API
Define Data Source
Resource URL
As we want to fetch exchange rates dynamically, we have to define a place holder for From & To currency values.
Select Get records(GET) among the CRUD option as we are fetching only single record from API repose .
API Call
Complete URI will look like this
api.exchangerate.host/convert?from={Fromcur}&to={Tocur}.
Note : Place holder are case sensitive .
You can test the results of API by providing static text to place holder & set response schema to app
Testing Resource URI
Now we are ready with our backend data Config.
😊 … Best part of the tool is we doesn't required any third party tool like POSTMEN for testing API calls .
We will navigate back to UI & bind the variables.
Assign App variables to input fields which we had created in our earlier steps from properties tab.
Binding App variables for input fields
Adding button element to the app which action trigger our API call.
Adding Button action
At bottom of the page, you can find the logic to Button & define what actions need to be performed for it.
As we have only one data source define, by default
Get record action will refer to same.
Output of the Get record will be assigned to the App variable (ExchangeRate) which was defined to hold the response value in our previous steps.
Get Record
Set response to output variable
Assign the data variable with specific value which we are intended for .
Assign value from response schema
Response schema
Bind
rate from response scheme to our output variable
ExchangeRate .
Added one Text element for displaying exchange rate & bind
ExchangeRate variable to text field .
Text element for displaying conversion rate
All done with our App development
😉 ,,, will test our application ..
We can test in web portal, or we can download SAP build apps from App store connect it to your AppGyver community edition.
Here I am displaying results from mobile application using SAPBuild Apps.
Application Result
Conclusion :
SAP Build Apps will drastically reduce development efforts on UI & we can easily integrate pre-built business logic components to our application which can address most of the business use cases.
In this blog, I had taken a small use case of consuming RESTful API by parsing the URL from screen input elements & binding the API response back to UI element for displaying the results .
I hope you found this blog post informative and helpful.
Please share your feedback, it would be helpful to learn and explore more!
Thanks for taking your time & going through the blog.
Related Information :
https://community.sap.com/topics/build-apps
https://learning.sap.com/products/sap-build
https://developers.sap.com/tutorials/appgyver-create-application.html