Decisions Component

 

Estimated Reading Time:  8 minutes

Overview

The Decisions component is an event component for logic-based in/then scenarios. For example, if your end-user selects radio button A, then show field B. Or, if your end-user types value X, then display pop-up Y.

Three inputs drive the Decisions component:

  • Input component: What drives the action. Any component works here, including Buttons, Radio Buttons, or Text Fields. The Decisions references the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the input component.

  • Output component: What reacts to the action. Again, any component works, including Panels and Field-Groups containing multiple components. The Decisions references the Property ID of the output component.

  • Decisions component: The Decision itself. You can configure the interaction between the inputs and outputs using Micro Decisions. You can set the input and output behavior by selecting the Type for each. The Micro Decisions table is where you'll set if/then rules using your defined inputs and outputs. Inputs display in the left columns of the Micro Decisions table. The column headers match the Input components' Property IDs. Outputs display in the right columns and are named using a concatenation of their ID and Type.

You can find the Decisions component in the Data & Events Processing group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a Decisions component, how to configure its settings, and how to use it in a module.

About the Configuration Window

TIP  To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Display Panel

Field Text

A static image displaying the UDesigner Decisions component's Display setting.

Setting

Description

Canvas Label Text

A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the Module Builder.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

NOTE  For Decisions, it's best practice to use the same value for Canvas Label Text as your Property ID: ruleXxx.

Adding a Decisions Component

In this scenario, you'll show a follow-up question when an end-user answers No to "Are you a citizen of the United States?" These instructions assume that you have an open module saved with a title.

In this configuration, you need the following components:

Configure the Radio Buttons Component

This component asks the end-user if they're a citizen of the United States. If the end-user answers Yes, this is the end of the process. If the end-user answers No, the process continues. This Radio Button is the input for your Decisions component's if/then rule.

1. Drag and drop a Radio Buttons icon Radio Buttons component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter citizenCheck.
3. In the Label Text field, enter Are you a citizen of the United States?.
4. Click Data Icon Data.
5. Complete the Values table as follows:
  Option Label Value to Store in Submission Data

1

Yes

yes

2

No

no

A static image displaying the Radio Button component configuration window, the Data panel is selected and the Values data table is filled out with Yes and No values.

6. From the component's configuration window, click Actions Icon Actions.
7. In the Trigger field, enter ruleCitizen. You'll set up this component in a later step.

A static image displaying the Radio component's configuration window, the Actions panel is selected, and the Trigger field is set to ruleCitizen.

8. Click Save Component.

Configure the Text Field Component

This component stays hidden until the end-user answers No to the question. After selecting No, the Text Field displays, and the end-user can add their country of citizenship. This Text Field is the output for your Decisions component's if/then rule.

1. Drag and drop a  Text Field component onto your canvas, placing it below the citizenCheckRadio Buttons icon Radio Buttons component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter whatCountry.
3. In the Label Text field, enter If no, what country?.
4. Under Default State Options, set Hide Field to (ON).

A static image dislaying the Text Field component's configuration window. The Display panel is selected and the Deault State Options section is shown. The Hide Field setting is toggled to ON.

5. Click Save Component.

Configure the Decisions Component

Your Decisions component holds the logic behind your if/then rule. In this example, if the end-user selects No in the Radio Buttons component, then the Text Field component displays.

1. Drag and drop a Decisions Component icon Decisions component onto your canvas, placing it below the whatCountry  Text Field component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter ruleCitizen.
3. In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter ruleCitizen.
4. Navigate to the Decisions Component icon Decisions component's Actions settings.
5. Next to Inputs & Outputs, click Edit.
6. Complete the Inputs table as follows:
  Property ID Alias Type

1

areYouACitizen

 

exact

NOTE  Setting an output Type of exact lets you use exact values in the Micro Decisions table. Exact is a good option because there are only two possible values from the Radio Buttons component: yes and no.

7. Complete the Outputs table as follows:
  Property ID

Type

1

whatCountry

visible

NOTE  Setting an output Type of visible lets you hide or display the field referenced in the Property ID column. So, your Text Field displays or hides based on the end-user's Radio Buttons selection. You'll set this up in the Micro Decisions table.

8. Under Conditionals, click the Add New Row button two times. This creates a two row table using the Inputs and Outputs values as headers.
9. Complete the Conditionals table as follows:
  citizenCheck whatCountry_visible

1

no

yes

2

 

no

A static image displaying the Decisions component's Actions settings, the Conditionals table is highlighted and filled out.

10. Click Save Component.
11. Save your module.

Preview your module in Express View Express View is how your end-user views you 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., and test it out:

Resources

 

Estimated Reading Time:  8 minutes

Overview

The Decisions component is an event component for logic-based in/then scenarios. For example, if your end-user selects radio button A, then show field B. Or, if your end-user types value X, then display pop-up Y.

Three inputs drive the Decisions component:

  • Input component: What drives the action. Any component works here, including Buttons, Radio Buttons, or Text Fields. The Decisions references the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the input component.

  • Output component: What reacts to the action. Again, any component works, including Panels and Field-Groups containing multiple components. The Decisions references the Property ID of the output component.

  • Decisions component: The Decision itself. You can configure the interaction between the inputs and outputs using Micro Decisions. You can set the input and output behavior by selecting the Type for each. The Micro Decisions table is where you'll set if/then rules using your defined inputs and outputs. Inputs display in the left columns of the Micro Decisions table. The column headers match the Input components' Property IDs. Outputs display in the right columns and are named using a concatenation of their ID and Type.

Here are some real-world examples of when to use a Decisions component:

  • Displaying a Country of Citizenship field after your end-user answers that they're not a U.S. citizen.

  • Showing state-specific question labels, based on your end-user's selected state of residence.

  • Adjusting a maximum loan amount based on your end-user's calculated credit score.

  • Displaying a field with the click of a button.

You can find the Decisions component in the Data & Events Processing group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a Decisions component, how to configure its settings, and how to use it in a module.

About the Configuration Window

TIP  To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Display Panel

A static image dispaying the Decisions component's Display settings.

Setting

Description

Canvas Label Text

A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the Module Builder.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

NOTE  For Decisions, it's best practice to use the same value for Canvas Label Text as your Property ID: ruleXxx.

Adding a Decisions Component

In this scenario, you'll show a follow-up question when an end-user answers No to "Are you a citizen of the United States?" These instructions assume that you have an open module saved with a title.

In this configuration, you need the following components:

Configure the Radio Buttons Component

This component asks the end-user if they're a citizen of the United States. If the end-user answers Yes, this is the end of the process. If the end-user answers No, the process continues. This Radio Button is the input for your Decisions component's if/then rule.

1. Drag and drop a Radio Buttons icon Radio Buttons component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter citizenCheck.
3. In the Label Text field, enter Are you a citizen of the United States?.
4. Click Data Icon Data.
5. Complete the Values table as follows:
  Option Label Value to Store in Submission Data

1

Yes

yes

2

No

no

A static image displaying the Radio Button component configuration window, the Data panel is selected and the Values data table is filled out with Yes and No values.

6. From the component's configuration window, click Actions Icon Actions.
7. In the Trigger field, enter ruleCitizen. You'll set up this component in a later step.

A static image displaying the Radio component's configuration window, the Actions panel is selected, and the Trigger field is set to ruleCitizen.

8. Click Save & Close.

Configure the Text Field Component

This component stays hidden until the end-user answers No to the question. After selecting No, the Text Field displays, and the end-user can add their country of citizenship. This Text Field is the output for your Decisions component's if/then rule.

1. Drag and drop a  Text Field component onto your canvas, placing it below the citizenCheck Radio Buttons icon Radio Buttons component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter whatCountry.
3. In the Label Text field, enter If no, what country?.
4. Under Default State Options, set Hide Field to Toggle Button set to On (ON).

A static image dislaying the Text Field component's configuration window. The Display panel is selected and the Deault State Options section is shown. The Hide Field setting is toggled to ON.

5. Click Save Component.

Configure the Decisions Component

Your Decisions component holds the logic behind your if/then rule. In this example, if the end-user selects No in the Radio Buttons component, then the Text Field component displays.

1. Drag and drop a Decisions Component icon Decisions component onto your canvas, placing it below the whatCountry  Text Field component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and the Canvas Label Text fields, enter ruleCitizen.
3. Click Actions Icon Actions.
4. Complete the Inputs table as follows:
  Property ID Alias Type

1

areYouACitizen

 

exact

NOTE  Setting an output Type of exact lets you use exact values in the Micro Decisions table. Exact is a good option because there are only two possible values from the Radio Buttons component: yes and no.

5. Complete the Outputs table as follows:
  Property ID

Type

1

whatCountry

visible

NOTE  Setting an output Type of visible lets you hide or display the field referenced in the Property ID column. So, your Text Field displays or hides based on the end-user's Radio Buttons selection. You'll set this up in the Micro Decisions table.

6. Complete the Micro Decisions table as follows:
  Input Values Output Values
  citizenCheck whatCountry_visible

1

no

yes

2

 

no

A static image displaying the Decisions component's Actions settings, the Microdecisions table is highlighted and filled out.

7. Click Save & Close.
8. Save your module.

Preview your module in Express View Express View is how your end-user views you 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., and test it out:

Resources