---
title: "Example: Show or Hide Controls Based on Button Selection"
slug: "example-show-or-hide-controls-based-on-button-selection"
updated: 2024-09-09T02:54:21Z
published: 2024-09-09T02:54:21Z
canonical: "docs.processmaker.com/example-show-or-hide-controls-based-on-button-selection"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Example: Show or Hide Controls Based on Button Selection

Follow an demonstrative example that shows and hides controls in a Screen based on visibility rules set by the selected button.

## Overview

> [!NOTE]
> **Intended audience:** Process designers, Web designers, graphic designers
> 
> **Tags:** Submit Button control; Rich Text control; Multicolumn / Table control; visibility rule; Screen design

Use visibility rules to design how [Screen Builder](/v1/docs/screen-builder) controls show and/or hide based on [Request variable](/v1/docs/request-variable) values while that [Screen](/v1/docs/screens) is open during a Task. The following example demonstrates how to use visibility rules in Screen design. From among four different [Submit Button](/v1/docs/submit-button-control) controls, after one button is selected, one among four [Rich Text](/v1/docs/rich-text-control) controls display while the others hide. This example demonstrates how to show and/or hide controls in the Screen as the user interacts with it.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/8ca2c1ba-e2bf-4769-a1f1-eadffb98d606.png)

A Rich Text control displays when a specific Submit Button control is selected

This example contains the following procedures in this order:

- [Add a Multicolumn / Table control](/v1/docs/example-show-or-hide-controls-based-on-button-selection#undefined).
- [Add four Submit Button controls](/v1/docs/example-show-or-hide-controls-based-on-button-selection#add-submit-button-controls).
- [Add four Rich Text controls](/v1/docs/example-show-or-hide-controls-based-on-button-selection#add-four-rich-text-controls).

After designing the example, [preview it](/v1/docs/example-show-or-hide-controls-based-on-button-selection#undefined).

## Add a Multicolumn / Table Control

Follow these steps to add and configure a [Multicolumn / Table](/v1/docs/multicolumn-table-control) control for [this example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#overview):

1. [Log on](/v1/docs/participant-basics#log-on-to-processmaker-platform) to ProcessMaker Platform.
2. [Create a new Screen](/v1/docs/create-a-new-screen#create-a-new-processmaker-screen). The **Create Screen** screen displays.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e3d89592-94ff-42e5-b7aa-d1d2d46e6c15.png)
3. In the **Name** setting, enter the name of the Screen. This example uses the name `Show and Hide Controls Based on Visibility Rules`.
4. In the **Description** setting, enter a description of this Screen.
5. From the **Type** setting, select the **Form** option.
6. From the **Category** drop-down menu, select the Screen Category to assign this Screen. This example uses the following settings.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/c0d8d16e-fa16-4209-b22d-e26f7d036b9c.png)
7. Click **Save**. The Screen is created and opens in Screen Builder to design.
8. [Add a Multicolumn / Table control](/v1/docs/multicolumn-table-control#add-the-control-to-a-processmaker-screen). The control displays with two columns by default, each with a 6 column span setting.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/cfbebcc1-6392-48b4-b9c1-1b1394cf323d.png)
9. This example uses four (4) columns. Since the total column span must equal to 12, each of the four columns must be a column span setting of `3`. Follow these steps to configure these four columns:

  1. Remove one of the default columns with a column span of 6 by clicking its **Remove** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/bd8edfbb-f6ec-4863-bf54-ffa1d3d61a74.png) since the default columns are too wide to accommodate two more columns and still equal 12 column span.
  2. Click the **Add Column** button to add a new column. The **Add New Column** screen displays.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/64051162-8725-4996-9b26-8e65cb664b08.png)
  3. In the **Column Width** setting, enter `3`.
  4. Click **OK**. The new column with a column span setting of `3` displays.
  5. Remove the other default column that has a column span of 6.
  6. Repeat steps 2 through 4 to add a third column with a column span of 3.
  7. Repeat steps 2 through 4 to add a fourth column with a column span of 3.

The Multicolumn / Table control now has four columns, each with a column span setting of `3`.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/f299e70f-4050-4ef7-8962-46d9eff38a62.png)
10. [Add the four Submit Button controls into the Multicolumn / Table control for this example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#add-submit-button-controls).

## Add Four Submit Button Controls

This example uses four [Submit Button](/v1/docs/submit-button-control) controls from which to demonstrate how [Rich Text](/v1/docs/rich-text-control) controls show and hide based on which of the four buttons is selected.

Follow these steps to add and configure four Submit Button controls for [this example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#overview):

1. [Ensure the Multicolumn / Table control has been added and configured to your Screen with four (4) columns](/v1/docs/example-show-or-hide-controls-based-on-button-selection#add-a-multicolumn-table-control).
2. Add the first Submit Button control to the leftmost column in the [Multicolumn / Table](/v1/docs/multicolumn-table-control) control, and then configure that control with the following setting values:

  1. **Label:** In the [**Label setting**](/v1/docs/submit-button-control#label), enter `Tip 1` for this example.
  2. **Variable Name:** In the [**Variable Name setting**](/v1/docs/submit-button-control#variable-name), enter `tip` for this example. Note this value because this will be used for the other Submit Button controls as well.
  3. **Value:** In the [**Value setting**](/v1/docs/submit-button-control#value), enter `1` for this example to represent the first of the four Submit Button controls. When this button is clicked, this control sets the `tip` variable to `1`.
  4. **Type:** From the **Type** setting in the **Configuration** panel, select the **Regular Button** option for this example. The default **Submit Button** option submits the Screen when used in a Request, which is not the intended design for this example. Furthermore, when previewing this Screen, a message displays that the Screen was submitted.
3. Add the second Submit Button control to the second column in the Multicolumn / Table control, and then configure that control with the following setting values:

  1. **Label:** In the **Label** setting, enter `Tip 2` for this example.
  2. **Variable Name:** In the **Variable Name** setting, enter `tip` for this example.
  3. **Value:** In the **Value** setting, enter `2` for this example to represent the second of the four Submit Button controls. When this button is clicked, this control sets the `tip` variable to `2`.
  4. **Type:** From the **Type** setting in the **Configuration** panel, select the **Regular Button** option.
4. Add the third Submit Button control to the third column in the Multicolumn / Table control, and then configure that control with the following setting values:

  1. **Label:** In the **Label** setting, enter `Tip 3` for this example.
  2. **Variable Name:** In the **Variable Name** setting, enter `tip` for this example.
  3. **Value:** In the **Value** setting, enter `3` for this example to represent the third of the four Submit Button controls. When this button is clicked, this control sets the `tip` variable to `3`.
  4. **Type:** From the **Type** setting in the **Configuration** panel, select the **Regular Button** option.
5. Add the fourth Submit Button control to the fourth column in the Multicolumn / Table control, and then configure that control with the following setting values:

  1. **Label:** In the **Label** setting, enter `Tip 4` for this example.
  2. **Variable Name:** In the **Variable Name** setting, enter `tip` for this example.
  3. **Value:** In the **Value** setting, enter `4` for this example to represent the fourth of the four Submit Button controls. When this button is clicked, this control sets the `tip` variable to `4`.
  4. **Type:** From the **Type** setting in the **Configuration** panel, select the **Regular Button** option.

The four Submit Button controls are now placed in the Multicolumn / Table control.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/231278f7-ad90-4bed-bb34-27ef51b9f551.png)
6. [Add the four Rich Text controls for this example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#undefined).

## Add Four Rich Text Controls

This example uses four [Rich Text](/v1/docs/rich-text-control) controls that show or hide based on which of the four [Submit Button](/v1/docs/submit-button-control) controls are selected.

Follow these steps to add and configure four Rich Text controls for [this example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#overview):

1. Add the first Rich Text control below the [Multicolumn / Table](/v1/docs/multicolumn-table-control) control, and then configure that control with the following setting values:

  1. **Content:** In the [**Content** setting](/v1/docs/rich-text-control#content), enter text that displays when this Rich Text control shows. This example uses the following text: `<h2>Tip 1</h2>`

`<p>This is Tip 1 that displays when the "Tip 1" button is selected.</p>`
  2. **Visibility Rule:** In the [**Visibility Rule** setting](/v1/docs/rich-text-control#visibility-rule) in the **Advanced** panel, enter `tip == "1"`. Whenever the variable `tip` equals `1`, then this control displays. In this example, `tip` is set to `1` only when the Submit Button control that is labeled **Tip 1** is selected.
2. Add the second Rich Text control below the first Rich Text control, and then configure that control with the following setting values:

  1. **Content:** In the **Content** setting, enter text that displays when this Rich Text control shows. This example uses the following text: `<h2>Tip 2</h2>`

`<p>This is Tip 2 that displays when the "Tip 2" button is selected.</p>`
  2. **Visibility Rule:** In the **Visibility Rule** setting in the **Advanced** panel, enter `tip == "2"`. Whenever the variable `tip` equals `2`, then this control displays. In this example, `tip` is set to `2` only when the Submit Button control that is labeled **Tip 2** is selected.
3. Add the third Rich Text control below the second Rich Text control, and then configure that control with the following setting values:

  1. **Content:** In the **Content** setting, enter text that displays when this Rich Text control shows. This example uses the following text: `<h2>Tip 3</h2>`

`<p>This is Tip 3 that displays when the "Tip 3" button is selected.</p>`
  2. **Visibility Rule:** In the **Visibility Rule** setting in the **Advanced** panel, enter `tip == "3"`. Whenever the variable `tip` equals `3`, then this control displays. In this example, `tip` is set to `3` only when the Submit Button control that is labeled **Tip 3** is selected.
4. Add the fourth Rich Text control below the third Rich Text control, and then configure that control with the following setting values:

  1. **Content:** In the **Content** setting, enter text that displays when this Rich Text control shows. This example uses the following text: `<h2>Tip 4</h2>`

`<p>This is Tip 4 that displays when the "Tip 4" button is selected.</p>`
  2. **Visibility Rule:** In the **Visibility Rule** setting in the **Advanced** panel, enter `tip == "4"`. Whenever the variable `tip` equals `4`, then this control displays. In this example, `tip` is set to `4` only when the Submit Button control that is labeled **Tip 4** is selected.
5. [Preview the example](/v1/docs/example-show-or-hide-controls-based-on-button-selection#undefined).

## Preview the Example

After designing [the example that demonstrates how to show and hide controls](/v1/docs/example-show-or-hide-controls-based-on-button-selection#overview), preview it:

1. Click the **Preview** button if you are in Design mode. The four Submit Button controls display.
2. Select any of the Submit Button controls, such as the one labeled **Tip 1**.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/498b77e4-dce1-49e0-bc69-88d7aa48fb52.png)

Upon selection, the Rich Text control displays in which its **Visibility Rule** setting is set for `tip == "1"`. When that Submit Button control is selected, it sets the variable `tip` to the value `1`. ProcessMaker Platform evaluates all visibility rules that meet that condition, and then displays those controls that meet that condition. All other controls in the Screen hide.