--- title: "How to: Use an Internal API in a Multi-Select Dropdown Component" slug: "how-to-use-an-internal-api-in-a-multi-select-dropdown-component" updated: 2025-09-25T20:37:35Z published: 2025-09-25T20:37:35Z canonical: "docs.unqork.io/how-to-use-an-internal-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 Internal API in a Multi-Select Dropdown Component ## Overview In the Module Builder, you can configure [Dropdown](/v1/docs/dropdown-component) and [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) components to reference [Data Collection](/v1/docs/data-collections) values using an internal API (application programming interface) call. In Express View, the Dropdown components display the Data Collection values to the end-user in a list. Here's how the completed how-to guide looks in Express View: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_InternalDrop_Express.webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) Here's how the completed how-to guide 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_InternalDrop_ModuleEditor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) ## What You'll Learn In this article, you’ll learn how to make an internal API call using a Multi-Select Dropdown component. ## What You’ll Need To set up this use case, you need: - 1 [Data Collection](/v1/docs/data-collections) - 1 [Multi-Select Dropdown component](/v1/docs/multi-select-dropdown-component) ## Pre-Configuration ### Configure the Data Collection First, create a Data Collection of animal types. Then, configure a Multi-Select Dropdown component to call an API to reference the Data Collection. Since the Data Collection is in Unqork, it's an internal API call. From the Workspace page: 1. Click ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_collection_icon(1).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) **Data Collections**. 2. Click **+ Create New**. 3. In the Enter a Collection Name field, enter Animal Types. > [!NOTE] > Each Data Collection name is unique. If you are practicing in the Training environment, you need a unique name for your Data Collection to save it. 4. In the first column, enter the following: Animal, Moose, Aardvark, Baboon, Dolphin, Fox, Gorilla, Kangaroo, Unicorn, Panda. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_InternalDrop_DataCollection_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) 5. Click **Set Headers as First Row**. This sets your Animal Data Collection entry (column 1, row 1) as the header for the first column. Later, you'll reference this header when configuring your Multi-Select Dropdown component. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_InternalDrop_DataCollection2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) 6. Click Save Data Collection. ## Configure the Multi-Select Dropdown Component Next, add a Multi-Select Dropdown component to list the options for the end-user. Then, populate the Multi-Select Dropdown using the Animal Types data using an internal API call to pull it. These instructions assume that you have an open module saved with a title. 1. In the Module Builder, drag and drop a ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/multiselect_teal_dropdown(7).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D)**Multi-Select Dropdown** component onto your canvas. 2. In the Property ID field, enter **animalTypes**. 3. In the **Label Text** field, enter Animal Types. 4. In the **Item Template** field, Enter {{ item.Animal }}. This sets the HTML display for each item in the Multi-Select Dropdown. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/APIs_Internal_Dropdown_01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) 5. From the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/multiselect_teal_dropdown(8).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) **Multi-Select Dropdown** navigation menu, select ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_teal_icon(8).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D)**Data**. 6. From the **Data Source Type**, select **URL**. 7. In the **Data Source URL**, enter /fbu/uapi/query/Animal Types/distinct/distinct=Animal. > [!NOTE] > This URL directs the Multi-Select Dropdown to the **Animal Types** Data Collection. From there, the URL instructs the component to separate out the column labeled **Animal**. Only values from that column display in your Multi-Select Dropdown component. 8. In the **Value Property**, enter animal. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/APIs_Internal_Dropdown_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A44Z&se=2026-11-11T03%3A57%3A44Z&sr=c&sp=r&sig=Jyjp98hF%2BcU6dqTveHNGn4f2SVpGSaLYqEQZc65xazQ%3D) 9. Click **Save & Close**. 10. **Save** your module. ## Resources - [How to: Use an External API in a Dropdown Component](/v1/docs/how-to-use-an-external-api-in-a-multi-select-dropdown-component). - [How to: Making Internal API Calls in Unqork](/v1/docs/making-internal-api-calls-in-unqork). - [How to: Making a Multipart API Call in Unqork](/v1/docs/use-case-making-a-multipart-api-call-in-unqork). - [Learn more about API best practices](/v1/docs/api-best-practices). - [Search the Community Hub for more information](https://community.unqork.com/search?q=api%20call). 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. 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. 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. A Data Collection is any static data referenced by your application. A Property ID is the unique field ID used by Unqork to track and link components in your module. A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.