---
title: "Example: Dependent Select List Controls Display Countries and Regions from a Collection"
slug: "example-dependent-select-list-controls-display-countries-and-regions-from-a-collection"
updated: 2026-06-03T17:58:02Z
published: 2026-06-03T17:58:02Z
canonical: "documentation.decisions.com/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection"
stale: true
---

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

# Example: Dependent Select List Controls Display Countries and Regions from a Collection

Follow an example that uses a Collection containing records of all countries and their regions that display in dependent Select List controls.

## Overview

> [!NOTE]
> **Intended audience:** Process designers, Web designers, graphic designers, software developers, coding engineers
> 
> **Tags:** Collections; Select List control; dependent fields; geographical location; Screen design

The [Select List control](/v1/docs/select-list-control) in ProcessMaker Platform allows Process Designers to filter the contents of a list in real-time by using PMQL. Through this feature, the data displayed in a Select List control can change dynamically depending on the selection in another control or the value in a [Request variable](/v1/docs/request-variable).

> [!NOTE]
> ### Data Connectors That Provide Options for Two Dependent Select List Controls
> 
> Would you like to see this example that uses two Data Connectors that access the data sources from which the Select List controls reference countries and their corresponding regions? See [Example: Dependent Select List Controls Display Countries and Regions Using Two Data Connectors](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-using-two-data-connectors).
> 
> The following example demonstrates dependent fields: how the options in one [Select List control](/v1/docs/select-list-control) depend on which option is selected from a previous Select List control. This example demonstrates that after a country is selected from one Select List control, a second Select List control contains as options the regions in that selected country. This example uses a [Collection](/v1/docs/collections) that contains a list of countries and regions within those countries.

Each record in the Collection contains multiple fields, including but not limited to the following:

- Country Name
- Sub-country (region or city)

For the purposes of this example, only the country name and region are relevant. Below is an example of a Collection with the relevant country name and associated region or city within that record after columns within the Collection are configured.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/754fc2f1-9340-43cc-844b-9c6956812cc4.png)

Collection that contains countries and an associated region or city within each record

The two Select List controls for this example both reference the same Collection as the data source for their options. When a country is selected from one Select List control, only the regions associated with that selected country are available as options in the second Select List control: the second Select List control depends on the first Select List control for its options.

This example requires the following procedures:

1. [**Import and configure a Collection**](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#import-and-configure-a-collection)**:** Import a [Collection](/v1/docs/collections) that serves as a data source for both Select List controls.
2. [**Design a Screen with dependent controls**](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#design-a-screen-with-dependent-controls)**:** Design a [Screen](/v1/docs/screens) which displays two dependent Select List controls where the data in the second control is dependent on the selection made in the first control.

## Import and Configure a Collection

Follow these steps to import the [Collection](/v1/docs/collections) needed [for this example](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#overview):

1. Download the attached ZIP file below the following screenshot.
2. Extract the JSON file contained within the downloaded ZIP file. This is the Collection for this example.
3. [Import the Collection](/v1/docs/export-and-import-a-collection#import-a-collection). The Collection displays in the **Collections** page.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/bb83c404-c7b4-4a6d-be06-b04f515ea20f.png)

The Collections tab shows the "Countries with Regions" Collection

[countries_with_regions.zip](https://content.gitbook.com/content/P6fxwYtQYia2gDgyWZ6L/blobs/OrkaaoG0OByE7TfDpQrU/countries_with_regions.zip)

## Design a Screen with Dependent Controls

Follow these steps to design a [Screen](/v1/docs/screens) that uses dependent Select List controls as [described in this example](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#overview):

1. [Create a new Screen](/v1/docs/create-a-new-screen). The Screen displays in Screen Builder.
2. [Add the Select List control](/v1/docs/select-list-control#add-the-control-to-a-processmaker-screen) from which to select a country from the list of countries.
3. Add the Select List control from which to select a region from the selected country in the first Select List control. This is the dependent control.
4. For the first Select List control, configure the following settings:

  1. **Variable Name:** Enter `Countries` in the **Variable Name** property.
  2. **Label**: Enter `Countries` in the **Label** property.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/6ce80f88-d4b6-49cb-a504-726ecd6b6acd.png)
  3. **Data Source**: Select the option **Collection** from the **Data Source** property.

    - **Collection**: From the **Collection** drop-down menu, select the Collection `Countries  with Regions`. If you are unable to see this Collection as an option, then review the steps in [Import and Configure a Collection](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#import-and-configure-a-collection) section again.
    - **Label**: From the **Label** drop-down menu, select the option `Countries`.
    - **Value**: From the **Value** drop-down menu, select the option `Countries`.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/85ee46f2-d5bc-4609-bdec-d7bbe76c562d.png)
5. For the second Select List control, configure the following settings:

  1. **Variable Name**: Enter `Countries` in the **Variable Name** property.
  2. **Label**: Enter `Countries` in the **Label** property.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/49c5cb6f-6900-4a09-af39-6d15df13e97a.png)
  3. **Data Source**: Select the option **Collection** from the **Data Source** property.

    - **Collection**: From the **Collection** drop-down menu, select the Collection `Countries  with Regions`. If you are unable to see this Collection in the list, review the steps in [Import and Configure a Collection](/v1/docs/example-dependent-select-list-controls-display-countries-and-regions-from-a-collection#import-and-configure-a-collection) section again.
    - **Label**: From the **Label** drop-down menu, select the option `Countries`.
    - **Value**: From the **Value** drop-down menu, select the option `Countries`.
    - **PMQL**: Enter `data.Countries = "{{Countries}}"` in the **PMQL** property.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/c4f1e0e5-5d47-462a-9933-c451084026a0.png)
6. [Preview the Screen](/v1/docs/preview-a-screen-for-desktop-and-mobile-devices). The **Countries** Select List control displays a list of countries from the **Countries with Regions** Collection.
7. Select a country from the list. The **Regions in the Selected Country** Select List control only displays regions from the selected country. The second Select List control depends on the first for its options.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/eaa1563c-4002-4d5e-8b34-e8e30cc4a8fd.png)