> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elementum.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Populate Dropdown Fields from External APIs

> Configure dropdown fields that fetch options dynamically from external APIs

## Overview

API-powered dropdown fields retrieve their selection options from external APIs at runtime, rather than from a static list of values maintained within Elementum. This enables use cases where dropdown options need to reflect data from third-party systems such as ERPs, CRMs, or custom internal services.

In Elementum, an API-powered dropdown is a **Dynamic** dropdown field that references an API Element. The API Element is built on top of an API CloudLink and exposes one or more API Actions that fetch data from the external system. The dropdown calls a selected API Action at runtime to populate its options.

***

## Prerequisites

Before configuring API-powered dropdown fields, ensure the following:

* **Admin access** to the app where you want to add the field
* **API endpoint details** for the external system:
  * Endpoint URL
  * HTTP method (GET, POST, or PUT)
  * Authentication credentials (if required)
  * Response format (JSON)

***

## Step 1: Create an API CloudLink

Follow [Connect a REST API via CloudLink](/administration/connect-rest-api-cloudlink) to set up the connection. In short:

1. Navigate to <img src="https://mintcdn.com/elementum/TFCVHNVI8zhq54sg/images/icons/settings.svg?fit=max&auto=format&n=TFCVHNVI8zhq54sg&q=85&s=3ffc43e8a0875412cc27335241aeb4c8" alt="Settings icon" className="inline-ui-icon" width="24" height="24" data-path="images/icons/settings.svg" /> **Organization Settings** > **CloudLinks**.
2. Click **+ CloudLink** and choose **API**.
3. Enter a **Name** and **Base URL**, select an **Authentication** method, and provide the credentials.
4. Click **Save**.

<Note>
  API CloudLinks power dropdowns and API Elements only. AI services (OpenAI, Gemini, Snowflake Cortex, etc.) cannot be attached to a CloudLink configured with **API** as the connection type—use a CloudLink connected to a supported data warehouse instead.
</Note>

## Step 2: Create an API Element

Create a new <span style={{ whiteSpace: "nowrap" }}><img src="https://mintcdn.com/elementum/qCzryjcKPIeW4b77/images/icons/elements.png?fit=max&auto=format&n=qCzryjcKPIeW4b77&q=85&s=1f6ffd07425e91ffc9c17b5885e300dd" alt="Elements icon" className="inline-ui-icon" width="24" height="24" data-path="images/icons/elements.png" /> Element</span> connected to the API CloudLink you created in Step 1, and define the Element's fields to match the structure of the API response.

The Element's data is populated by the API at runtime rather than being stored in Elementum's database.

## Step 3: Configure API Actions on the Element

Configure the API Actions required to interact with the API CloudLink through the Element. Each API Action defines how to call the external system — the endpoint path, HTTP method, request parameters, and how the response maps to the Element's fields.

At minimum, configure one API Action that returns the list of records used to populate the dropdown's options.

## Step 4: Add a Dynamic Dropdown Field to a Record Layout

1. In your app's **Configuration** > <img src="https://mintcdn.com/elementum/o8kmGDw3VX7947y5/images/icons/record-details-layout.svg?fit=max&auto=format&n=o8kmGDw3VX7947y5&q=85&s=a688ce743f4a26c1775efc1ef84a0d68" alt="Record Details Layout icon" className="inline-ui-icon" width="24" height="24" data-path="images/icons/record-details-layout.svg" /> **Record Details Layout**, add a new **Dropdown** or **Multi-Select** field.
2. In the field configuration, set **Dropdown Type** to **Dynamic**.
3. In the related object selector on the right side of the page, choose the API Element you created in Step 2.
4. Select the **API Action** to use for populating the dropdown.
5. Fill out the remaining field options, including any variable mappings the selected API Action requires (see below).

### Variable mappings

If the selected API Action requires input parameters, map them to fields on the current record or to static values:

| Mapping Type     | Description                                                                     |
| ---------------- | ------------------------------------------------------------------------------- |
| **Record Field** | A field value from the current record is passed as a variable to the API Action |
| **Static Value** | A fixed value is passed to the API Action                                       |

This allows the dropdown options to change based on other field values on the record.

### Supported configurations

The following dynamic-dropdown configurations are supported:

| Configuration                                                       | Supported | Notes                                                                                                                                        |
| ------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Parent/child dynamic dropdowns that reference **different** objects | Yes       | The child dropdown is filtered by the parent's selected value via a variable mapping on the API Action                                       |
| Parent/child dynamic dropdowns that reference the **same** object   | Yes       | Both dropdowns can target the same Element. Use distinct variable mappings or API Actions so each dropdown filters its options independently |

When configuring a parent/child relationship, the child dropdown must be mapped to a field on the current record (typically the parent dropdown's value) under **Variable Mappings**, so that the API Action retrieves child options scoped to the parent's selection.

***

## Cloud Credentials for API Connections

API-powered features store authentication credentials securely through the CloudLink system. To manage API credentials:

1. Navigate to <img src="https://mintcdn.com/elementum/TFCVHNVI8zhq54sg/images/icons/settings.svg?fit=max&auto=format&n=TFCVHNVI8zhq54sg&q=85&s=3ffc43e8a0875412cc27335241aeb4c8" alt="Settings icon" className="inline-ui-icon" width="24" height="24" data-path="images/icons/settings.svg" /> **Organization Settings** > **CloudLinks**
2. Select or create an **API** CloudLink
3. Configure credentials in the credential editor:
   * **Basic Auth**: Username and password
   * **Bearer Token**: API token
   * **OAuth 2.0**: Token URL, client ID, client secret, and optional scope

Credentials are encrypted at rest and are never exposed in the UI after initial configuration.

***

## Considerations

<AccordionGroup>
  <Accordion title="Performance">
    * API responses are subject to a configurable timeout. If the external API does not respond within the timeout period, the dropdown displays an error
    * Consider the latency of your external API. Dropdowns that take several seconds to load create a poor user experience
    * For high-traffic fields, ensure your external API can handle the request volume
  </Accordion>

  <Accordion title="Error Handling">
    * If the API returns an error or is unreachable, the dropdown displays an empty state with an error indicator
    * Verify your API endpoint is accessible from Elementum's servers (firewall rules, IP allowlisting may be required)
  </Accordion>

  <Accordion title="Data Freshness">
    * Dynamic dropdowns on API Elements fetch data according to the Element's configured refresh behavior
  </Accordion>

  <Accordion title="Security">
    * Use OAuth 2.0 or Bearer Token authentication for production integrations. Avoid Basic Auth over non-HTTPS endpoints
    * API credentials are stored encrypted and are not retrievable after configuration
    * Elementum sends requests server-side; API endpoints are not exposed to end users' browsers
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

| Issue                                  | Resolution                                                                                                                                                                                                           |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Dropdown shows no options              | Verify the API CloudLink is reachable and the API Action returns a valid JSON response. Confirm the API Action is the one selected on the dropdown field and that its response is mapped to the API Element's fields |
| Authentication errors                  | Confirm the CloudLink credentials are correct. For OAuth, verify the token URL, client ID, and client secret, and that the OAuth scope grants read access                                                            |
| Dropdown loads slowly                  | Check the external API's response time. Consider adding caching on the API side or reducing the response payload size                                                                                                |
| Options appear but display incorrectly | Review the API Action's response mapping on the API Element. Ensure the field used as the option label is mapped to the correct property in the response                                                             |
| Variable mappings not working          | Ensure the mapped source fields on the current record have values. Empty source fields result in empty or null parameters in the API Action request                                                                  |
