--- title: "How to: Configure Dynamic Modules in a Workflow" slug: "how-to-use-and-configure-dynamic-modules-in-a-workflow" updated: 2025-12-23T15:11:39Z published: 2025-12-23T15:11:39Z canonical: "docs.unqork.io/how-to-use-and-configure-dynamic-modules-in-a-workflow" --- > ## 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: Configure Dynamic Modules in a Workflow UDesignerClassic Designer Let’s say you need to display a different screen in your [workflow](/v1/docs/welcome-to-the-unqork-workflow-builder-1) based on an option an end-user selects. You can use **Dynamic Modules** to accomplish this functionality without using logic to achieve the same result. The [Task](/v1/docs/task-node) node includes the **Screen Type** setting that lets you choose whether that node displays a **static** module or a **dynamically** selected module when the workflow reaches it. Below is the difference between the two options: - **Static**: The Task node always displays the same module. - **Dynamic**: The Task node displays one of several modules, based on data stored in the workflow submission. ## Configuration In this how-to guide, you’ll configure a [Radio Buttons](/v1/docs/radio-buttons-component) component that lists various countries. Each option stores a corresponding module ID. When the end-user selects `country x`, the workflow stores `module ID y`, and the Task node uses that stored value to determine which module to display. This guide assumes you already know how to create a workflow-type application. Ensure your Workflow entrypoint is already created before following the steps below. > To learn more about workflow-type applications, visit our [Working With Workflow-Type Apps](/v1/docs/working-with-workflow-type-apps) article. ### Create the Customer Location Module To create the **Customer Location** module: 1. At the top right workflow Application page, click **+ Create New**. 2. Select **Module**. ![Dynamic Module Workflow interface showing search options and creation features for applications.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Create%20Module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 3. In the **Module Name** field, enter **{workspaceName}: Customer Location**. The **{workspaceName}** corresponds to your workspace. 4. From the **Module Type** drop-down, select **Front-End**. 5. (Optional) In the **Module Description** field, enter a description of your module. ![Creating a dynamic module for customer location with front-end specifications and descriptions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Create%20Module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **Create**. 7. Similarly, create the three more **Front-End** modules using the names below: ![Overview of dynamic module workflows for United States, Canada, Mexico, and customer location.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Module%20list.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 1. `{workspaceName}:Canada`. 2. `{workspaceName}:Mexico`. 3. `{workspaceName}:United States`. ### Gather the Module IDs Next, copy and store the module IDs of each module you created for later steps. 1. On the Application page, to the right of each module, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(5).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **(ellipsis)** button. 2. Select **Settings**. A modal displays. ![List of dynamic module workflows for different regions and customer locations.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Module%20Settings.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 3. Copy the **Module** **ID** field value to a note or text document on your computer. ![Module details for Dynamic Module Workflow: Canada, including ID and description.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_CD_modle%20id.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 4. Collect all three **module** **IDs** and move on to configuring the **Customer Location** module. ### Configure the Customer Location Module Next, configure the **Customer Location** module so end-users can select a country of origin. You'll reference the three module IDs created in the previous steps. 1. Open the **Customer Location** module. 2. In the Module Builder, drag and drop a **Radio Buttons** component onto the canvas. 3. In the **Property ID** field, enter `radioCountry`. 4. In the **Label Text** field, enter `Select Your Country of Residence`. 5. In the **Values** table, enter the following: | Label | Value | | --- | --- | | Canada | {module ID of your Canada module} | | United States | {module ID of your United States module} | | Mexico | {module ID of your Mexico module} | > Enter the corresponding **module ID** for each of your country modules in the **Value** section without the **curly brackets** (**{}**). ![User interface displaying radio buttons for selecting country of residence options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_Radio%20button.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **Save Component**. 7. **Save** the module. ### Configure the Country Modules For each country module, configure an [HTML Element](/v1/docs/html-element-component) component denoting the country the module represents. That way, you can easily identify the purpose of the module in the Module Builder. 1. Open the **{workspaceName}:Canada** module. 2. Drag and drop an **HTML Element** component onto the canvas. 3. In the **Property ID** field, enter `h2Header`. 4. In the **Content** field, enter `Canada`. 5. In the **Tag** field, enter `h2`. 6. Click **Save Component**. 7. **Save** the module. 8. Repeat this process for the **United States** and **Mexico** modules, entering their respective names in the HTML Element component’s **Content** field. ### Configure the Workflow When creating a workflow-type application, a workflow is automatically created in your application. Open the workflow to configure a [Task](/v1/docs/task-node) node that directs end-users to the **Customer Location** module, where they select their location. Then, the second Task node directs end-users to the country module based on their chosen location from the first Task node. #### Configure the First Task Node To begin, link the first Task node to the **Customer Location** module, where end-users select their country of origin. 1. In the Workflow Builder, drag and drop a **Task** node in the **Authenticated** swimlane. 2. Click **Edit**. 3. In the **Label** field, enter `Customer Location`. 4. Set the **Screen Type** as **Static**. 5. From **Module** drop-down, select your **{workspaceName}:****Customer Location** module. ![User task editing interface showing customer location and module settings options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Edit%20Task1.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **X** (Close). 7. Connect the output port (right) of the **Start** node to the input port (left) of the `Customer Location` **Task** node. #### Configure the Second Task Node Next, configure a second [Task](/v1/docs/task-node) node that directs end-users to the dynamic modules. Here, the **Property ID** field references the [Radio Buttons](/v1/docs/radio-buttons-component) component configured eariler. 1. Drag and drop another **Task** node in the **Authenticated** swimlane. 2. Click **Edit**. 3. In the **Label** field, enter `Country`. 4. Set **Screen Type** as **Dynamic**. 5. In the **Property ID** field, enter `radioCountry`. > [!NOTE] > This step refers to the **Radio Buttons** component set up in the **Customer Location** module. ![Workflow diagram showing user task for selecting customer country in a dynamic module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Edit%20Task%202.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **X** (Close). 7. Connect the output port (right) of the `Customer Location` **Task** node to the input port (left) of the `Country` **Task** node. 8. Connect the output port (right) of the `Country` **Task** node to the input port (left) of the **End** node. 9. Click **Save…**. 10. Click **Save**. The image below illustrates the final workflow configuration. ![Workflow diagram showing customer location leading to country and ending process.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_dynamic%20workflow.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) ### Test the Workflow Now that the dynamic module configuration is complete, test the workflow to verify that the modules are dynamically chosen based on the end-user's selection. 1. Preview your workflow. A new page populates with the first module in the Workflow. 2. From the radio buttons, select **Canada**. 3. Click **Next**. The workflow directs the end-user to the Canada module. 4. Repeat this process for the other countries to confirm they work as expected. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Video.webm?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) Let’s say you need to display a different screen in your [workflow](/v1/docs/welcome-to-the-unqork-workflow-builder-1) based on an option an end-user selects. You can use **Dynamic Modules** to accomplish this functionality without using logic to achieve the same result. The [Task](/v1/docs/task-node) node includes the **Screen Type** setting that lets you choose whether that node displays a **static** module or a **dynamically** selected module when the workflow reaches it. Below is the difference between the two options: - **Static**: The Task node always displays the same module. - **Dynamic**: The Task node displays one of several modules, based on data stored in the workflow submission. ## Configuration In this how-to guide, you’ll configure a [Radio Buttons](/v1/docs/radio-buttons-component) component that lists various countries. Each option stores a corresponding module ID. When the end-user selects `country x`, the workflow stores `module ID y`, and the Task node uses that stored value to determine which module to display. This guide assumes you already know how to create a workflow-type application. Ensure your Workflow entrypoint is already created before following the steps below. > To learn more about workflow-type applications, visit our [Working With Workflow-Type Apps](/v1/docs/working-with-workflow-type-apps) article. ### Create the Customer Location Module To create the **Customer Location** module: 1. At the top right workflow Application page, click **+ Create New**. 2. Select **Module**. ![Dynamic Module Workflow interface showing search options and creation features for applications.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Create%20Module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 3. In the **Module Name** field, enter **{workspaceName}: Customer Location**. The **{workspaceName}** corresponds to your workspace. 4. From the **Module Type** drop-down, select **Front-End**. 5. (Optional) In the **Module Description** field, enter a description of your module. ![Creating a dynamic module for customer location with front-end specifications and descriptions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Create%20Module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **Create**. 7. Similarly, create the three more **Front-End** modules using the names below: ![Overview of dynamic module workflows for United States, Canada, Mexico, and customer location.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Module%20list.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 1. `{workspaceName}:Canada` 2. `{workspaceName}:Mexico` 3. `{workspaceName}:United States` ### Gather the Module IDs Next, copy and store the module IDs of each module you created for later steps. 1. On the Application page, to the right of each module, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(5).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **(ellipsis)** button. 2. Select **Settings**. A modal displays. ![List of dynamic module workflows for different regions and customer locations.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Module%20Settings.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 3. Copy the **Module** **ID** field value to a note or text document on your computer. ![Module details for Dynamic Module Workflow: Canada, including ID and description.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_CD_modle%20id.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 4. Collect all three **module** **IDs** and move on to configuring the **Customer Location** module. ### Configure the Customer Location Module Next, configure the **Customer Location** module so end-users can select a country of origin. You'll reference the three module IDs created in the previous steps. 1. Open the **Customer Location** module. 2. In the Module Builder, drag and drop a **Radio Buttons** component onto the canvas. 3. In the **Property ID** field, enter `radioCountry`. 4. In the **Label Text** field, enter `Select Your Country of Residence`. 5. In the table under **Data Source Type**, enter the following: | Option Label | Value to Store in Submission Data | | --- | --- | | Canada | {module ID of your Canada module} | | United States | {module ID of your United States module} | | Mexico | {module ID of your Mexico module} | > Enter the corresponding **module ID** for each of your country modules in the **Value** section without the **curly brackets** (**{}**). ![Form displaying country selection options for user residence with data source details.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Radio%20buttons.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **Save & Close**. 7. **Save** the module. ### Configure the Country Modules For each country module, configure an [HTML Element](/v1/docs/html-element-component) component denoting the country the module represents. That way, you can easily identify the purpose of the module in the Module Builder. 1. Open the **{workspaceName}:Canada** module. 2. Drag and drop an **HTML Element** component onto the canvas. 3. In the **Property ID** field, enter `h2Header`. 4. In the **Tag** field, enter `h2`. 5. In the **Content** field, enter `Canada`. 6. Click **Save & Close**. 7. **Save** the module. 8. Repeat this process for the **United States** and **Mexico** modules, entering their respective names in the **HTML Element** component **Content** field. ### Configure the Workflow When creating a workflow-type application, a workflow is automatically created in your application. Open the workflow to configure a [Task](/v1/docs/task-node) node that directs end-users to the **Customer Location** module, where they select their location. Then, the second Task node directs end-users to the country module based on their chosen location from the first Task node. #### Configure the First Task Node To begin, link the first Task node to the **Customer Location** module, where end-users select their country of origin. 1. In the Workflow Builder, drag and drop a **Task** node in the **Authenticated** swimlane. 2. Click **Edit**. 3. In the **Label** field, enter `Customer Location`. 4. Set **Screen Type** to `Static`. 5. From the **Module** drop-down, select your **{workspaceName}:****Customer Location** module. ![User task editing interface showing customer location and module settings options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Edit%20Task1.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **X** (Close). 7. Connect the output port (right) of the **Start** node to the input port (left) of the `Customer Location` **Task** node. #### Configure the Second Task Node Next, configure a second [Task](/v1/docs/task-node) node that directs end-users to the dynamic modules. Here, the **Property ID** field references the [Radio Buttons](/v1/docs/radio-buttons-component) component configured eariler. 1. Drag and drop a **Task** node in the **Authenticated** swimlane. 2. Click **Edit**. 3. In the **Label** field, enter `Country`. 4. Set **Screen Type** as **Dynamic**. 5. In the **Property ID** field, enter `radioCountry`. > [!NOTE] > This step refers to the **Radio Buttons** component set up in the **Customer Location** module. ![Workflow diagram showing user task for selecting customer country in a dynamic module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/New_UD_CD_Edit%20Task%202.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 6. Click **X** (Close). 7. Connect the output port (right) of the `Customer Location` **Task** node to the input port (left) of the `Country` **Task** node. 8. Connect the output port (right) of the `Country` **Task** node to the input port (left) of the **End** node. 9. Click **Save…**. 10. Click **Save**. The image illustrates the final workflow configuration. ![Workflow diagram showing customer location leading to country and ending process.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_dynamic%20workflow.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) ### Test the Workflow Now that the dynamic module configuration is complete, test the workflow to verify that the modules are dynamically chosen based on the end-user's selection. 1. Preview your workflow. A new page populates with the first module in the Workflow. 2. From the radio buttons, select **Canada**. 3. Click **Next**. The workflow directs the end-user to the Canada module. 4. Repeat this process for the other countries to confirm they work as expected. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Video.webm?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%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. 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 modal is a window that appears on top of the content you are currently viewing. 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 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. 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.