Fetch And Display A List Of Country Names Using The "API Select List" Field

In this guide, we will explain how to use the "API Select List" field to populate a dropdown with options loaded dynamically from a publicly accessible JSON URL, in this example, a list of country names.

1. INITIAL SETUP:

• Drag and drop an "API Select List" field onto your form.
• Rename the field label as needed.

2. CONFIGURE THE "API SELECT LIST" FIELD:

• Click the pencil icon of the "API Select List" field.
• API Type:
• Set the "API Type" to Get.
• This defines the HTTP method used to call the API. Use Get when you are simply fetching/reading data from a URL (the most common scenario). Use Post when your API requires sending data in the request body to retrieve a response.
• In this example, we are using Get since we are fetching a static JSON file from a public URL.

• API URL:
• Add the "API URL" to the publicly accessible JSON endpoint.
• In this example, enter: https://cdn.formyoula.app/defaults/countries_for_api_select_list.json
• This is the URL the field will call to retrieve the list of options. The URL must return a JSON response. It can be any publicly accessible endpoint, a static hosted JSON file.

• Field Label Position:
• Leave "Field Label Position" at its default, or choose a position (e.g., Top, Left) based on your form's layout preference.
• This controls where the field's label appears relative to the dropdown input.

• Enable Select Picker View:
• Enable "Enable Select Picker View".
• When turned on, this displays the options in a search-enabled picker view, allowing users to type and search through the list instead of scrolling through a plain dropdown. This is especially useful when the list has many options (e.g., a full list of countries).
• In this example, this is enabled since there are 190+ countries in the list.

• Array Response Key:
• Set the "Array Response Key" to select_values.
• This tells the field which key inside the JSON response contains the array of options to display.
• Since the list of country options is inside the select_values key, we enter select_values here.
• In this example, the JSON response is structured as:

{
  "select_values": [
    { "value": "Afghanistan" },
    { "value": "Albania" },
    ...
  ]
}

• Select Option Label Key:
• Set the "Select Option Label Key" to value.
• This defines which property of each object in the array is displayed to the user as the visible label in the dropdown.

• Select Option Value Key:
• Set the "Select Option Value Key" to value.
• This defines which property of each object is saved as the actual stored value when a user makes a selection.

• Show Results Only After Search:
• Enable "Show Results Only After Search".
• When turned on, the dropdown will not display any options until the user starts typing in the search box. This is useful for very large lists where showing all options at once would be overwhelming.
• In this example, this is enabled so users must type part of a country name before the matching results appear.

3. TEST THE FORM:

• Try the form.

• Click on the "Select a Country" field.

• The Select Picker view will open. Since "Show Results Only After Search" is enabled, the list will be empty until you start typing.
• Type part of a country name, and matching results will appear.

• Select a country, the selected value will be saved to the field.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂