---
title: "How to: Use Data Collections in a Dropdown Component"
slug: "how-to-use-data-collections-in-a-dropdown-component"
description: "Learn to dynamically populate a drop-down menu in Unqork using API calls to reference data collections like Human Height for seamless user experience."
updated: 2026-01-20T17:05:00Z
published: 2026-01-20T20:38:53Z
canonical: "docs.unqork.io/how-to-use-data-collections-in-a-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 Data Collections in a Dropdown Component

In this how-to guide, you'll learn how to use a [Plug-In](/v1/docs/plug-in-component) component to make an internal API call to Unqork's Data Collection and reference select data using a [Dropdown](/v1/docs/how-to-use-data-collections-in-a-dropdown-component) component.

By making this API call, you’ll populate a drop-down menu without manually adding values. If you change your Data Collection, those changes populate in your menu dynamically. In this how-to guide, you'll use a pre-existing Data Collection to reference.

> [!NOTE]
> You'll see the terms "reference data" and "data collections". Both terms refer to an Unqork Data Collections.

For this how-to guide, use an [Initializer](/v1/docs/initializer-component) component with a **New Submission** Trigger Type. The Initializer component triggers a Plug-In component that requests data from an existing Data Collection. A Dropdown component references the Data Collection and populates a list in a drop-down menu. That way, end-users can select an option.

To better understand how this works, consider the following example. Let’s say you create an application for the Motor Vehicle Division. Your customers need to complete an application for a new driver’s license. Part of the application asks the applicant to include their height. To make it easier for the applicant, they can select a height from a drop-down list. You can also provide measurements in inches and centimeters.

Click on the tab that matches your Unqork designer platform:

UDesignerClassic Designer

## Preconfiguration

Typically, you need to create a Data Collection whose data you want to retrieve. For this how-to guide, you'll call a pre-existing Data Collection called **Human Height**. You do not need to configure a Data Collection as long as you know its file name.

## Configuration

Now that you know which Data Collection to reference, open your module to finish the configuration.

### Configure the Plug-In Component

Use a [Plug-In](/v1/docs/plug-in-component) component to retrieve submission data from the **Human Height** Data Collection using an internal API call.

1. In the Module Builder, drag and drop a **Plug-In** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `plugGetHeight`.
3. From the **Internal Services** drop-down, select **Get Rows from Reference Data**.
4. From the **Data Collection** drop-down, enter or select `Human``Height`.

> [!NOTE]
> The **Data Source URL** automatically populates as **/fbu/uapi/query/Human Height/all**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(774).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
5. Click **Save Component**.

### Configure the Dropdown Component

Next, configure a [Dropdown](/v1/docs/dropdown-component) component to reference height data from your [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop a **Dropdown** component onto your canvas, placing it below the **Plug-In** component.
2. In the **Property ID** field, enter `height`.
3. In the **Label Text** field, enter `Height`.
4. Set the **Data Source Type** as **Data Reference Key**.
5. In the **Data Reference Key** field, enter or select `plugGetHeight`.
6. In the **Value Property** field, enter `Height`.
7. In the **Label Path** field, enter `Height`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(741).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
8. Click **Save Component**.

### Configure the Initializer Component

Now, set up your [Initializer](/v1/docs/initializer-component) component with a **New Submission** Trigger Type. This Trigger Type executes the Initializer component with each new module submission.

1. Drag and drop an **I****nitializer** component onto your canvas, placing it above your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `initPlugGetHeight`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| plugGetHeight | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(742).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
5. Click **Save Component**.
6. **Save** your module.

Your completed module configuration looks like the following in the Module Builder:

![Input fields for height settings with function names displayed above each field.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(743).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)

**Preview** your module to test your configuration in Express View. From the **Height** drop-down, select a height in feet and inches, or centimeters.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dropdown_RefData_Express.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)

## Preconfiguration

Typically, you need to create a Data Collection whose data you want to retrieve. For this how-to guide, you'll call a pre-existing Data Collection called **Human Height**. You do not need to configure a Data Collection as long as you know its file name.

## Configuration

Now that you know which Data Collection to reference, open your module to finish the configuration.

### Configure the Plug-In Component

Use a [Plug-In](/v1/docs/plug-in-component) component to retrieve submission data from the **Human Height** Data Collection using an internal API call.

1. In the Module Builder, drag and drop a Plug-In component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `plugGetHeight`.
3. From the **Internal Services** drop-down, select **Get Rows from Reference Data**.
4. From the **DataCollection** drop-down, enter or select `Human Height`.

> [!NOTE]
> The **Data Source URL** automatically populates as **/fbu/uapi/query/Human Height/all**.

[![A static image of the completed configuration of the Plug-In component with the Get Rows from Reference Data Internal Service.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_RefData_01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20RefData%2001.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
5. Click **Save**.

### Configure the Dropdown Component

Next, configure a [Dropdown](/v1/docs/dropdown-component) component to reference height data from your [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop a **Dropdown** component onto your canvas, placing it below the **Plug-In** component.
2. In the **Property ID** field, enter `height`.
3. In the **Label Text** field, enter `Height`.
4. To the left of the component's configuration window, click **D****ata**.
5. Set the **Data Source Type** as **Data Reference Key**.
6. In the **Data Reference Key** field, enter or select `plugGetHeight`.
7. In the **Value Property** field, enter `Height`.
8. In the **Label Path** field, enter `Height`.

[![A static image displaying the completed configuration of the Dropdown component with the Data Reference Key Data Source Type.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_RefData_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20RefData%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
9. Click **Save & Close**.

### Configure the Initializer Component

Now, set up your [Initializer](/v1/docs/initializer-component) component with a **New Submission** Trigger Type. This Trigger Type executes the Initializer component with each new module submission.

1. Drag and drop an **I****nitializer** component onto your canvas, placing it above your Plug-In component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initPlugGetHeight`.
3. To the left of the component's configuration window, click **Actions**.
4. From the **Trigger Type** drop-down, select **New Submission**.
5. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| plugGetHeight | trigger | GO |

[![A static image displaying the completed configuration of the Initializer component with the New Submission Trigger Type and outputting the Plug-In component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_RefData_03_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20RefData%2003.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)
6. Click **Save & Close**.
7. **Save** your module.

Your completed module configuration looks like the following in the Module Builder:

[![A static image displaying the completed component configuration in the Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_RefData_05_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20RefData%2005.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)

**Preview** your module to test your configuration in Express View. From the **Height** drop-down, select a height in feet and inches, or centimeters.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dropdown_RefData_Express.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A56Z&se=2026-11-07T18%3A57%3A56Z&sr=c&sp=r&sig=w0TB4W7zpe1f%2FHCsUB2FEc164Tm6iHJAYC%2FRFmH9PoU%3D)

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.

A Data Collection is any static data referenced by your application.

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.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

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

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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.