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