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

Advanced Label

The Advanced Label option allows you to change the label of a field dynamically based on a condition you define. Instead of always showing the same fixed label under the ‘Basic’ tab, the field can display different labels depending on requirements of the form. Use spreadsheet-like functions such as IF, AND, OR, etc. and make use of other field variables to set your conditions. Type @ and select the field.

This is useful when the meaning of a field changes based on context, business logic, or user choices.

For example:
If you have a dropdown called Type with options “Weather API” and “Tracking API”.
The label should adjust based on what API data is needed.

So:
– If Weather API, show “Fetch Weather Details”
– If Tracking API, show “Fetch Tracking Details”

Formula:

IF({type} = "Weather API", "Fetch Weather Details", "Fetch Tracking Details")

This allows the same field to adapt its displayed purpose without needing multiple separate fields.

Advanced Description

The Advanced Description option works exactly like Advanced Label, but it changes the description text instead. This is useful when guidance or instructions for a field need to change depending on earlier answers.

For example, using the same scenario from Advanced Label:
If you have a dropdown called Type with options like “Weather API” and “Tracking API”, you may want the description of your API fetch field to guide the user differently depending on what they selected.

So:
– If the user selects Weather API, the description could say: “Fetch current weather data for the provided location.”
– If the user selects Tracking API, the description could say: “Fetch tracking data for the provided identifier.”

Formula:

IF({type} = "Weather API", "Fetch current weather data for the provided location.", "Fetch tracking data for the provided identifier.")

This helps users understand what is required from them without showing unnecessarily long or irrelevant instructions.

‍

Additional Examples (Apply to Both Advanced Label and Advanced Description)

1. Showing nothing until a selection is made

For example, if you have a dropdown field called Visit Category with options “Routine” and “Urgent”, you may want the label or description of a field to remain blank until the user first selects a category.

Once a selection is made:

• If the user chooses Routine, the field will display “Routine”.
• If the user chooses Urgent, the field will display “Urgent”.

Formula (can be used in either Advanced Label or Advanced Description):

{visit_category}The label/description stays empty until the dropdown has a selected value.
After the user picks an option, the selected text (Routine or Urgent) becomes the label or description.

2. Changing label/description based on language selection

For example, if your form includes a dropdown field called Select Language with options English, Spanish, and French, you can show the label or description in the selected language.

So:

• If the user selects English, show English text.
• If the user selects Spanish, show Spanish text.
• If the user selects French, show French text.

Formula (can be used in either Advanced Label or Advanced Description):

IF({select_language} = "English", "Enter details", IF({select_language} = "Spanish", "Ingrese detalles", "Entrez les détails"))The formula returns the text for the selected language.
Only one label/description is shown at a time, depending on what the user picks in the Select Language dropdown.

‍

Important Notes (applies to both Advanced Label and Advanced Description)

1. Variables do not change
When a field is created, its variable name is derived from the label you set in the Basic tab. That variable name is what you must use in formulas, workflows, and other logic. The visible label or description shown by Advanced Label / Advanced Description does not change the variable name.

2. Submissions tab: table view vs right panel
In the Submissions area, the table view always displays the labels from the Basic tab. When you open an individual submission, the right panel shows the labels and descriptions as they appear in the form (i.e., the Advanced Label and Advanced Description applied for that submission). This keeps the submission list consistent while letting reviewers see the context-aware labels and descriptions when viewing a record.

3. Bulk Edit shows Basic tab labels and descriptions
When you need to Bulk Edit submissions, the spreadsheet you download shows the labels and descriptions from the Basic tab only. Advanced Label and Advanced Description are not applied in Bulk Edit, so keep that in mind when preparing bulk updates.

4. Some fields cannot be used inside Advanced Label/Description formulas
Certain block types do not expose a variable that can be referenced in Advanced Label or Advanced Description. If a block does not expose a variable, you cannot use it inside the formula.

Geo Address

GPS Location

PaymentGateway

Audio

Live Tracking

Signature

Code Scanner

NFC Reader

Get Data from RestApi

Get Data from Other Apps

Get Data from Google Sheets

Get Data from Database

AI Block

Text, HTML & Embedding

Attached Files

Image Viewer

Video Viewer

PFD Viewer

Code block

Progress Bar

Action Button

‍

‍

‍

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).

‍

‍