---
title: "How to: Trigger Decisions With Buttons"
slug: "how-to-trigger-decisions-with-buttons"
updated: 2025-09-25T20:56:42Z
published: 2025-09-25T20:56:42Z
canonical: "docs.unqork.io/how-to-trigger-decisions-with-buttons"
---

> ## 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: Trigger Decisions With Buttons

UDesignerClassic Designer

## Overview

The [Decisions](/v1/docs/decisions-component) component includes the following Trigger Types:

- **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](/v1/docs/button-component) component to trigger the Decisions component.

## Triggering a Decisions Component

Triggering operations is a 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 enter that Property ID into a Button component.

Let's create a sample question to ask your end-user how many dependents they have. If they have more than three dependents, they'll enter additional information in a [Text Area](/v1/docs/text-area-component) component. You only want that Text Area component to display when necessary, so you'll use a Button component to trigger the Decisions component, hiding or displaying the field.

## Configure the Radio Buttons Component

First, use a [Radio Buttons](/v1/docs/radio-buttons-component) component to ask your end-user their number of dependents. Later, you'll set this component as the input for your Decisions component.

1. In the Module Builder, drag and drop a **R****adio Buttons** component onto your canvas.
2. In the Property ID field, enter **numberDependents**.
3. In the Label Text field, enter `Please select a number of dependents: (More than three will require additional information.)`.
4. Navigate to the component's **Data** settings.
5. Next to the **Values** table, click **Edit**. The Values panel displays.
6. Underneath the **Values** table, click **New** five times.
7. In the **Option Label** and **Option Value** fields, enter the following:

| # | Option Label | Option Value |
| --- | --- | --- |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| 4 | 4 | 4 |
| 5 | 5+ | 5 |
8. Click **Save Component**.

## Configure the Text Area Component

Next, let's configure a [Text Area](//docs/text-area-component) component, so your end-user can enter additional information if they have more than three dependents. You'll hide this field so it does not display to the end-user unless necessary. Later, you'll configure a Decisions component to display the Text Area component if the end-user selects three or more dependents.

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Text Area** component onto your canvas, placing it below your **numberDependents** **R****adio Buttons** component.
2. In the Property ID field, enter **dependentDetails**.
3. In the Label Text field, enter `Please provide additional information on all dependents:`.
4. Under **Default State Options**, set **Hide Field** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)**.
5. Click **Save Component**.

## Configure the Decisions Component

Next, add a [Decisions](/v1/docs/decisions-component) component, which relies on your end-user's selection using the Radio Buttons component. So, you'll set the Radio Buttons component as the input and your Test Area component as the output to control whether it's visible or hidden. Then, you'll set the **Trigger Type** to Manual to control the Decisions component with a button.

1. Drag and drop a **D****ecisions** component onto your canvas, placing it below your **dependentDetails** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Text Area** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleDependents`.
3. Set the **Trigger Type** to Manual.
4. Navigate to the component's **Actions** settings.
5. Next to **Inputs & Outputs**, click Edit.
6. In the **Inputs** table, enter the following:

| # | **Source** | **Alias** | **Type** |
| --- | --- | --- | --- |
| 1 | numberDependents |  | exact |

> [!NOTE]
> Setting the Output Type of **exact** is a good option because there are only two possible values with a Radio Buttons component: `yes` and `no`.
7. In the **Outputs** table, enter the following:

| # | **Source** | **Type** |
| --- | --- | --- |
| 1 | dependentDetails | visible |

> [!NOTE]
> Setting an Output Type of visible lets you hide or display the field referenced in the Property ID column. In this case, you'll reference your Text Area component.
8. Under **Conditionals**, click **Add New Row** five times.
9. In the **Conditionals** table, enter the following:

|  | **numberDependents** | **dependentDetails_Visible** |
| --- | --- | --- |
| 1 | 1 | no |
| 2 | 2 | no |
| 3 | 3 | no |
| 4 | 4 | yes |
| 5 | 5 | yes |

[![A static image displaying the UDesigner Decisions component's Conditionals table filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecision_Decision_Conditionals_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOpsDecision%20Decision%20Conditionals.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
10. Click **Save Component**.

## Configure the Button Component

Lastly, let's configure a [Button](/v1/docs/button-component) component with an Action Type of Event. Then, you'll enter the Property ID of your Decisions component in the **On Click** field. When your end-user clicks the button, it triggers your Decisions component.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(24).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Button** component onto your canvas, placing it below your **ruleDependents** **D****ecisions** component.
2. In the Property ID field, enter **btnDecision**.
3. In the Label Text field, enter `Set Dependents`.
4. Set the Action Type to Event.
5. In the **On Click** field, enter `ruleDependents`.

[![A static image displaying the UDesigner Button component's Action Type and On Click fields filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecision_UDesigner_OnClick_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOpsDecision%20UDesigner%20OnClick.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save Component**.
7. **Save** your module.

Preview your module in Express View, and make a radio button selection. If you click Set Dependents with either 4 or 5+ selected, your Text Area component displays. If you change your selection and click the button again, the Text Area component hides.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecision_ExpressPreview.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

## Resources

- [Learn about the Button component](/v1/docs/button-component).
- [Learn about the Decisions component](/v1/docs/decisions-component).
- [Learn how to trigger multiple operations using the Buttons component](/v1/docs/how-to-trigger-multiple-operations).

## Overview

The [Decisions](/v1/docs/decisions-component) component includes the following Trigger Types:

- **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](/v1/docs/button-component) component to trigger the Decisions component.

## Triggering a Decisions Component

Triggering operations is a 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 enter that Property ID into a Button component.

Let's create a sample question to ask your end-user how many dependents they have. If they have more than three dependents, they'll enter additional information in a [Text Area](/v1/docs/text-area-component) component. You only want that Text Area component to display when necessary, so you'll use a Button component to trigger the Decisions component, hiding or displaying the field.

## Configure the Radio Buttons Component

First, use a [Radio Buttons](/v1/docs/radio-buttons-component) component to ask your end-user their number of dependents. Later, you'll set this component as the input for your Decisions component.

1. In the Module Builder, drag and drop a **R****adio Buttons** component onto your canvas.
2. In the Property ID field, enter **numberDependents**.
3. In the Label Text field, enter `Please select a number of dependents: (More than three will require additional information.)`.
4. Enter the following **Option Label** and **Value to Store in Submission Data** values:

|  | Option Label | Value to Store in Submission Data |
| --- | --- | --- |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| 4 | 4 | 4 |
| 5 | 5+ | 5 |

[![A static image displaying the Radio Buttons component's data settings in the Buttons Trigger Operations How To guide.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecisions_RadioButtons_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOpsDecisions%20RadioButtons.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
5. Click **Save & Close**.

## Configure the Text Area Component

Next, let's configure a [Text Area](/v1/docs/text-area-component) component, so your end-user can enter additional information if they have more than three dependents. You'll hide this field so it does not display to the end-user unless necessary. Later, you'll configure a Decisions component to display the Text Area component if the end-user selects three or more dependents.

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Text Area** component onto your canvas, placing it below your **numberDependents** **R****adio Buttons** component.
2. In the Property ID field, enter **dependentDetails**.
3. In the Label Text field, enter `Please provide additional information on all dependents:`.
4. Under **Default State Options**, set **Hide Field** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)**.
5. Click **Save & Close**.

## Configure the Decisions Component

Next, add a [Decisions](/v1/docs/decisions-component) component, which relies on your end-user's selection using the Radio Buttons component. So, you'll set the Radio Buttons component as the input and your Test Area component as the output to control whether it's visible or hidden. Then, you'll set the **Trigger Type** to **Manual** to control the Decisions component with a button.

1. Drag and drop a **D****ecisions** component onto your canvas, placing it below your **dependentDetails** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Text Area** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleDependents`.
3. In the component's configuration window, click **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(22).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Actions**.
4. Set the **Trigger Type** to **Manual**.
5. In the **INPUTS** table, enter the following:

|  | **Property ID** | **Alias** | **Type** |
| --- | --- | --- | --- |
| 1 | numberDependents |  | exact |

> [!NOTE]
> Setting the Output Type of **exact** is a good option because there are only two possible values with a Radio Buttons component: `yes` and `no`.
6. Complete the **OUTPUTS** table as follows:

|  | **Property ID** | **Type** |
| --- | --- | --- |
| 1 | dependentDetails | visible |

> [!NOTE]
> Setting an Output Type of **visible** lets you hide or display the field referenced in the Property ID column. In this case, you'll reference your Text Area component.

[![A static image displaying the Decisions component's Inputs and Outputs tables filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOps_InputsOutputs_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOps%20InputsOutputs.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
7. In the **MICRO DECISIONS** table, enter the following:

|  | **Input Values** | **Output Values** |
| --- | --- | --- |
|  | **numberDependents** | **dependentDetails_Visible** |
| 1 | 1 | no |
| 2 | 2 | no |
| 3 | 3 | no |
| 4 | 4 | yes |
| 5 | 5 | yes |

[![A static image displaying the Decisions component's Microdecisions table filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecisions_MicroDecisions_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOpsDecisions%20MicroDecisions.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
8. Click **Save & Close**.

## Configure the Button Component

Lastly, let's configure a [Button](/v1/docs/button-component) component with an Action Type of **Event**. Then, you'll enter the Property ID of your Decisions component in the **On Click** field. When your end-user clicks the button, it triggers your Decisions component.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(24).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) Button** component onto your canvas, placing it below your **ruleDependents** **D****ecisions** component.
2. In the Property ID field, enter **btnDecision**.
3. In the Label Text field, enter `Set Dependents`.
4. Set the Action Type to **Event**.
5. In the **On Click** field, enter `ruleDependents`.

[![A static image displaying the Button component's Action Type and On Click fields filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecision_Button_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20ButtonsTriggerOpsDecision%20Button.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save & Close**.
7. **Save** your module.

**Preview** your module in Express View, and make a radio button selection. If you click **Set Dependents** with either 4 or 5+ selected, your Text Area component displays. If you change your selection and click the button again, the Text Area component hides.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_ButtonsTriggerOpsDecision_ExpressPreview.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

## Resources

- [Learn about the Button component](/v1/docs/button-component).
- [Learn about the Decisions component](/v1/docs/decisions-component).
- [Learn how to trigger multiple operations using the Buttons component](/v1/docs/how-to-trigger-multiple-operations).

A Property ID is the unique field ID used by Unqork to track and link components in your module.

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.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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 .

The action performed by the button when selected.

Express View is how your end-user views your 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.