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

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 controls show and/or hide based on Request variable values while that Screen is open during a Task. The following example demonstrates how to use visibility rules in Screen design. From among four different Submit Button controls, after one button is selected, one among four Rich Text 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.

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.

• Add four Submit Button controls.

• Add four Rich Text controls.

After designing the example, preview it.

Add a Multicolumn / Table Control

Follow these steps to add and configure a Multicolumn / Table control for this example:

1. Log on to ProcessMaker Platform.

2. Create a new Screen. The Create Screen screen displays.
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.
7. Click Save. The Screen is created and opens in Screen Builder to design.

8. Add a Multicolumn / Table control. The control displays with two columns by default, each with a 6 column span setting.
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 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.
   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.
10. Add the four Submit Button controls into the Multicolumn / Table control for this example.

Add Four Submit Button Controls

This example uses four Submit Button controls from which to demonstrate how Rich Text 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:

1. Ensure the Multicolumn / Table control has been added and configured to your Screen with four (4) columns.

2. Add the first Submit Button control to the leftmost column in the Multicolumn / Table control, and then configure that control with the following setting values:

   1. Label: In the Label setting, enter Tip 1 for this example.

   2. Variable Name: In the Variable Name setting, 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, 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.
6. Add the four Rich Text controls for this example.

Add Four Rich Text Controls

This example uses four Rich Text controls that show or hide based on which of the four Submit Button controls are selected.

Follow these steps to add and configure four Rich Text controls for this example:

1. Add the first Rich Text control below the Multicolumn / Table 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 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 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.

Preview the Example

After designing the example that demonstrates how to show and hide controls, 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.

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.