> For the complete documentation index, see [llms.txt](https://helpdocumentation.gitbook.io/user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdocumentation.gitbook.io/user-documentation/whatsapp-mini-apps/creating-a-dynamic-dropdown-using-api-in-mini-app.md).

# Creating a Dynamic Dropdown Using API in Mini App

This guide explains how to create a **dynamic dropdown field** in a Mini App by fetching options from an external API.

Overview

Dynamic dropdowns allow you to:

* Fetch real-time data from an API
* Populate dropdown options dynamically
* Avoid hardcoding values in the form

**1. Important Limitation**

> **API calls cannot be executed on the first screen of a Mini App.**

To handle this:

* Use an **initial screen with a button**
* Navigate to a **second screen** where the API is called

**2. Step-by-Step Setup**

**Step 1: Create Mini App Workflow**

* Go to **WhatsApp Mini App**
* Click on **Create New**
* Add category and create workflow

**Step 2: Add First Screen (Navigation Layer)**

* Add a **Footer Button**
* Set action as **Data Exchange**
* Select **New Screen**

This button will navigate users to the screen where API is triggered.

**Step 3: Call External API**

On the second screen:

1. Go to **Data Source**
2. Click on **Add New Data Source**
3. Enter your **API URL**
4. Select:
   * Method: As required (GET/POST)
   * Body Type: Form Data / None (as per API)
5. Click **Run & Save**

> **This step fetches sample (dummy) API response for mapping**

**3. Configure Dynamic Dropdown**

1. Add a **Dropdown Component**
2. Open **Settings**
3. Update:
   * **Label** → e.g., “Options”
   * **Data Source Type** → Dynamic
   * **Data Source** → Select your API
   * **Dynamic Data Accessor** → Select main response array

**4. Map Dropdown Fields**

From API response:

* **ID Field** → Unique identifier (e.g., `id`)
* **Title Field** → Display value (e.g., `label`)
* **Image Field** → Optional (can skip)

> **Always map fields from the first object of the response array**

**5. Submit Action**

* Add another **Footer Button**
* Set action as **Data Exchange → New Submission**

This will submit the selected dropdown value.

**6. Final Steps**

* Click **Save & Apply**
* Test the flow to ensure:
  * API data loads correctly
  * Dropdown shows dynamic options
  * Selection works as expected

This will enable a dynamic dropdown field in your WhatsApp Mini App that fetches its options live from any configured external API, ensuring users get up-to-date choices every time they use the flow.​

{% embed url="<https://www.youtube.com/watch?v=6nKzk8kUHS0>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://helpdocumentation.gitbook.io/user-documentation/whatsapp-mini-apps/creating-a-dynamic-dropdown-using-api-in-mini-app.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.