---
title: "How to: Use an External API in a Multi-Select Dropdown Component"
slug: "how-to-use-an-external-api-in-a-multi-select-dropdown-component"
description: "Learn to use External APIs in Unqork's Multi-Select Dropdown to efficiently populate lists with dog breed data from the Dog API."
updated: 2026-01-06T04:51:12Z
published: 2026-01-06T19:09:42Z
canonical: "docs.unqork.io/how-to-use-an-external-api-in-a-multi-select-dropdown-component"
---

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

# How to: Use an External API in a Multi-Select Dropdown Component

UDesignerClassic Designer

In Unqork, you can use **External APIs in Multi-Select Dropdown and regular Dropdown components** to present a long list of selectable options to your end-user. But populating lists can be tedious and time-consuming, and if more than one [component](/v1/docs/module-builder-component-library) uses the same list, it must be maintained in multiple places. The [Dropdown](/v1/docs/dropdown-component) and [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) components let you retrieve data from a source outside your [module](/v1/docs/introduction-to-the-module-builder). Use these components to set up an external API call to populate your list.

As with any external API call, it’s important to refer to the provider's API documentation. The API must be a table array of JSON objects for the Dropdown or Multi-Select Dropdown components to populate the values correctly. Look at the following external API as an example: [https://api.thedogapi.com/v1/breeds](https://api.thedogapi.com/v1/breeds). Clicking the link opens the API response that contains a JSON object with dog breed data. You might want to use only one piece of that information in a Dropdown or Multi-Select Dropdown component. In this how-to guide, you'll create a drop-down menu that lists only the dog breed names.

## Preconfiguration

Making external API calls in a Multi-Select Dropdown component is a two-part process. First, the external API service is set up on the [Services Administration](/v1/docs/services-administration) page. Next, a Multi-Select Dropdown component uses the external API service.

### Configure the External Service

First, you must add the Dog API external service to [Services Administration](/v1/docs/services-administration).

> [!NOTE]
> If you are completing this lab in the [Training](https://training.unqork.io/) environment, the Dog API is likely already set up. Double-check the list of Active Services before completing this step. If the Dog API is on the list of Active Services, move to the [Configure the Multi-Select Dropdown Component](/v1/docs/how-to-use-an-external-api-in-a-multi-select-dropdown-component#configure-the-multiselect-dropdown-component) section.

To add the Dog API service to Services Administration:

1. At the top right of the Unqork Designer Platform, click **Administration**.
2. Under Integration, click **Services Administration**.
3. Click **+ Add a Service**. The Create New Service modal displays.
4. In the **Service Title** field, enter `Dog API`.
5. In the **Service Name** field, enter `dog-API`.
6. In the Service Protocol + Host field, enter `https://api.thedogapi.com/v1/`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(649).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
7. Click **Next**.
8. Under **Share to**, select **Environment.**

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(650).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
9. Click **Create.**
10. Click **Save Changes**.

## Configuration

Next, add a Multi-Select Dropdown component to list options for the end-user. The external Dog API populates the component.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Multi-Select Dropdown Component

1. In the Module Builder, drag and drop a **Multi-Select Dropdown** component onto your canvas.
2. In the **Property ID** field, enter `dogBreeds`.
3. In the **Label Text** field, enter `Dog Breeds`.
4. In the **Item Template** field, enter `<span>{{ item.name }}</span>`. This sets the HTML display for each item.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/APIs_APIDropdown_Dropdown01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
5. From the component's configuration window, select **Data**.
6. Set the **Data Source Type** to **URL**.
7. From the **Service** drop-down, select **Dog API**.
8. In the **Data Source URL**, enter `breeds`.
9. In the **Value Property** field, enter `name`. The Value Property setting maps the name value in the JSON object from the API response to the Multi-Select Dropdown component selections.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/APIs_APIDropdown_Dropdown_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
10. Click **Save & Close**.
11. **Save** your module.

Here's how the completed example looks in the [Module Builder](/v1/docs/introduction-to-the-module-builder):

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_ExternalDrop_ModuleEditor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

Here's how the completed example looks in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_ExternalDrop_Express%20(1).webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

In Unqork, you can use **External APIs in Multi-Select Dropdown and regular Dropdown components** to present a long list of selectable options to your end-user. But populating lists can be tedious and time-consuming, and if more than one [component](/v1/docs/module-builder-component-library) uses the same list, it must be maintained in multiple places. The [Dropdown](/v1/docs/dropdown-component) and [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) components let you retrieve data from a source outside your [module](/v1/docs/introduction-to-the-module-builder). Use these components to set up an external API call to populate your list.

As with any external API call, it’s important to refer to the provider's API documentation. The API must be a table array of JSON objects for the Dropdown or Multi-Select Dropdown components to populate the values correctly. Look at the following external API as an example: [https://api.thedogapi.com/v1/breeds](https://api.thedogapi.com/v1/breeds). Clicking the link opens the API response that contains a JSON object with dog breed data. You might want to use only one piece of that information in a Dropdown or Multi-Select Dropdown component. In this how-to guide, you'll create a drop-down menu that lists only the dog breed names.

## Preconfiguration

Making external API calls in a Multi-Select Dropdown component is a two-part process. First, the external API service is set up on the [Services Administration](/v1/docs/services-administration) page. Next, a Multi-Select Dropdown component uses the external API service.

### Configure the External Service

First, you must add the Dog API external service to [Services Administration](/v1/docs/services-administration).

> [!NOTE]
> If you are completing this lab in the [Training](https://training.unqork.io/) environment, the Dog API is likely already set up. Double-check the list of Active Services before completing this step. If the Dog API is on the list of Active Services, move to the [Configure the Multi-Select Dropdown Component](/v1/docs/how-to-use-an-external-api-in-a-multi-select-dropdown-component#configure-the-multiselect-dropdown-component) section.

To add the Dog API service to Services Administration:

1. At the top right of the Unqork Designer Platform, click **Administration**.
2. Under Integration, click **Services Administration**.
3. Click **+ Add a Service**. The Create New Service modal displays.
4. In the **Service Title** field, enter `Dog API`.
5. In the **Service Name** field, enter `dog-API`.
6. In the Service Protocol + Host field, enter `https://api.thedogapi.com/v1/`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(649).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
7. Click **Next**.
8. Under **Share to**, select **Environment.**

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(650).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
9. Click **Create.**
10. Click **Save Changes**.

## Configuration

Next, add a Multi-Select Dropdown component to list options for the end-user. The external Dog API populates the component.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Multi-Select Dropdown Component

1. In the Module Builder, drag and drop a **Multi-Select Dropdown** component onto your canvas.
2. In the **Property ID** field, enter `dogBreeds`.
3. In the **Label Text** field, enter `Dog Breeds`.
4. In the **Item Template** field, enter `<span>{{ item.name }}</span>`. This sets the HTML display for each item.
5. From the **Data Source Type**, select **URL**.
6. From the **External Services** drop-down, select **Dog API**.
7. In the **Data Source URL**, enter `breeds`.
8. In the **Value Property** field, enter `name`. The Value Property setting maps the name value in the JSON object from the API response to the Multi-Select Dropdown component selections.

![Dropdown menu settings for selecting dog breeds with API integration details.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(604).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
9. Click **Save Component**.
10. **Save** your module.

Here's how the completed example looks in the [Module Builder](/v1/docs/introduction-to-the-module-builder):

![Dropdown menu for selecting dog breeds from an external API data source.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(628).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

Here's how the completed example looks in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_ExternalDrop_Express%20(1).webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

In Unqork, an External API (application programming interfaces) connects to services outside of the Unqork platform. APIs are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

A modal is a window that appears on top of the content you are currently viewing.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.