Get data from REST APIs

This article explains the Get data from REST APIs block in App Design.

Note: This block can pull data from any REST-based API that supports HTTP GET/POST/PATCH/DELETE methods. The api body accepts JSON/XML/FORM-DATA payloads and supports only JSON in its response.

Also note that the API response should be a JSON Object. It cannot be a JSON Array or a string or a number.

‍

Help video

‍

Use Cases

1. Getting Master data from company's existing APIs to fetch information of Customers, Employees, Vendors, Projects etc.
2. Querying/filtering the Master data based on values entered by the end-user on Clappia.
3. Getting live information of Currency exchange, weather etc from public APIs as part of the Clappia apps.

‍

Editing the Block

Click on the block and start editing on the panel that appears on the right side.

Label

This is what appears as the name for the REST API block to the end user. Give in any name you require.

Server URL

REST API endpoint of the Server from where data needs to be pulled. Sample Server URL - https://apiv2.clappia.com/public/xx/getProjectById

The URL can be dynamic also. Type @ to see a list of all variables of the app.

Method Type

HTTP Method Type that the API works on. Choose from one of GET, POST, PATCH, or DELETE.

Query String

Optional Query String that the API accepts. You can pass any variable from the current Clappia app to the query string arguments. Type @ to see a list of all variables of the app. The query String should follow the pattern -
?parameter1=value1&parameter2=value2& . . .

Or use the api access key that is provided in the documentation of the site. (This will have to come under the “Headers” section for header type “x-api -key”)

Headers

Headers are used to send attributes like API Keys, Content Type etc to the REST API.

Body Type

JSON Payload for the API. Applicable only if the Method Type is POST or PATCH. This also accepts variables from the Clappia App. Type @ to see a list of all variables of the app.
Body type can be JSON, XML, or Form Data.

Note: This should be a valid JSON. New line characters should not be present in the JSON.

Select fields from the API Response

This block assumes that the API Response is a JSON object. It cannot be an Array or a String or a Number. So let's say following is response of a GetCityByName API-

{
  "city_name": "Raipur",
  "state_name": "Chhattisgarh",
  "population": 1029198,
  "is_state_capital": true,
}

Now when a user enters the city name and fetches the city data from this API, we need to map the API Response to fields on Clappia. Let's say that we need only the city_name, state_name and is_state_capital fields in the Clappia App. You can add additional paths by clicking on ‘Add another field’. The JSON path query that needs to be set in the response can be created with the help of JSONPath Online Evaluators like: https://jsonpath.com/

The names for each field can be given accordingly, while the JSON Path Query will be as shown below:

Once the block is saved with all the details, you will see new read-only fields created in the app. You can also change the labels of these fields. Just click on any pulled block and edit the name if required.

Required

Enable this option if you want the user to compulsorily input the data. If enabled, the end user can submit if and only if the data is entered in this field.

Advanced Options

‍

Allow value to be changed after initial submission

This option is enabled by default. End users can edit the values that appear in the pulled fields after creating a submission, simply by clicking on the ‘Get data from Rest API’ button again. Edits can also be done through certain triggers, mentioned in the input box (You can write a formula here to conditionally allow editing of the data in the block after submission.) Type @ to see a list of all variables of the app if needed.

‍

Disable it if you do not want the end users to edit the values.

‍

Usecase 1

‍

Let’s say there is an app that allows users to get addresses after entering a certain street or building name. They can first enter that in the single line text block added to the app after which the ‘Get Data from Rest API’ button can be used to get the corresponding data: name, locality, region, latitude and longitude.

‍

The configurations of the ‘Get Data from Rest API’ block are as follows:

The data was retrieved from the site’s api documentation.

‍

Once the block is saved, the pulled fields based on the selected fields will appear.

Note: Here the JSON response returned is a list, and all the items of the list can be accessed through a dropdown if the required search item is maintained as the first response field and the [:] syntax is used to access all the list items for that attribute.

‍

‍

In App Home, where the app is live, a user can now enter the street/building name, click on the Get Data from Rest API block (named fetch address) and get the address;

‍

‍

‍

‍

Usecase 2

‍

An address locator app that allows users to capture their address details from the GPS location of the user captured by the app.

‍

‍

The configurations of the ‘Get Data from Rest API’ block are as follows:

‍

‍

The data was retrieved from the site’s api documentation.

In App Home, where the app is live, the GPS location of the user is automatically captured first following which the user can then fetch the location’s address details by clicking on the Rest API block (named fetch address).

‍

‍