How to: Configure Dynamic Modules in a Workflow

Let’s say you need to display a different screen in your workflow 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 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 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 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.
   

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.
   

6. Click Create.

7. Similarly, create the three more Front-End modules using the names below:

   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 (ellipsis) button.

2. Select Settings. A modal displays.
   

3. Copy the Module ID field value to a note or text document on your computer.
   

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 ({}).

   

6. Click Save & Close.

7. Save the module.

Configure the Country Modules

For each country module, configure an HTML Element 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 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.
   

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 node that directs end-users to the dynamic modules. Here, the Property ID field references the Radio Buttons 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.

   This step refers to the Radio Buttons component set up in the Customer Location module.

   

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.

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.