Use Case: Triggering Decisions with Buttons

Overview

If you're familiar with Decisions, you might already know the different Trigger Types. If you're not, here's a recap:

  • Watch: The component fires on each new entry made, or action taken on the input component.

  • Manual: The component fires when triggered by another component.

When selecting a Manual Trigger Type, one of the most common components you'll use is a Button. Let's take a look at how to trigger a Decisions component with a Button.

What You'll Learn

In this article, you'll learn how to trigger a Decisions component with a Button component.

Triggering a Decisions Component with a Button

Triggering operations is a pretty straightforward process, even if the operations vary.

For a Decisions component, you'll configure it as normal. You'll select Manual as the Trigger Type and make note of the component's Property ID. Then, you'll plug that Property ID into a Button component. Simple enough, right? To make sure you've got it, let's take a look at an example:

Let's create a sample question to ask your end-user how many dependents they have. If they have more than 3 dependents, they'll need to enter more information in a Text Area. You only want that Text Area to show if it's necessary, though. So, you'll use a Button to trigger that Decision, hiding or showing the field as needed.

What You'll Need

To set up this use case, you’ll need:

  • 1 Radio Buttons component

  • 1 Text Area component

  • 1 Decisions component

  • 1 Button component

Pre-Configuration

Configure the Radio Buttons Component

First, let's set up the main question in your application. You'll use a Radio Buttons component to ask your end-user how many dependents they have. Later, you'll set this component as the input for your Decisions component.

1. Drag and drop a Radio Buttons component onto your canvas.
2. Enter numberDependents in the Property ID.
3. Enter Please select a number of dependents: (More than 3 will require additional information.) in the Label Text.
4. Set your Option Label and Value to Store in Submission Data as shown below:

Option Label

Value to Store in Submission Data

1

1

2

2

3

3

4

4

5+

5

5. Click Save.

Configure the Text Area Component

Next, let's add a Text Area component. The Text Area is where your end-user will enter extra information if they have more than 3 dependents. For now, you'll set this field as hidden so it doesn't show to your end-user. Later, you'll configure your Decisions component to show the Text Area or hide it as necessary.

1. Drag and drop a Text Area component onto your canvas. Place your Text Area below your Radio Buttons.
2. Enter dependentDetails in the Property ID.
3. Enter Please provide additional information on all dependents: in the Label Text.
4. Set the Hide Field toggle to ON.
5. Click Save.

Configuration

Configure the Decisions Component

Now let's add the Decisions component. Your Decision relies on your end-user's answer in your Radio Buttons. So, you'll set the Radio Buttons as the input here. And your Text Area will be the output because that's what you want either visible or hidden. You'll also set the Trigger Type to Manual so you can control the Decision using a button.

1. Drag and drop a Decisions component onto your canvas. Place your Decisions component below your Text Area.
2. Enter ruleDependents in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. In the Inputs table, enter the following:
a. Property ID: enter numberDependents.
b. Type: enter exact.
5. In the Outputs table, enter the following:
a. Property ID: enter dependentDetails.
b. Type: enter visible.
6. In the Micro Decisions table, enter the following:

numberDependents

dependentDetails_Visible

1

no

2

no

3

no

4

yes

5

yes

7. Click Save.

Configure the Button Component

Finally, let's add your Button component. You'll set the Button Action Type to Event. And you'll enter the Property ID for your Decisions component in the Trigger on Click field. Now, when your end-user clicks the button, your Decisions component fires.

1. Drag and drop a Button component onto your canvas. Place your Button component below your Decisions component.
2. Enter btnDecision in the Property ID.
3. Enter Set Dependents in the Label Text.
4. Select Event from the Button Action Type.
5. Enter ruleDependents in the Trigger on Click.

6. Click Save.
7. Save your module.

Once you're finished, test out your work! Open your module in Express View and make a selection from your Radio Buttons. If you click your Set Dependents button with either 4 or 5+ selected, your Text Area appears. If you change your selection and click the button again, the Text Area disappears.

Lab

You can view the completed lab for this Decisions/Button use case here: https://training.unqork.io/#/form/5f63bcf1f1a98d024e8ddcb4/edit.