How To Conditionally Display/Hide Controls Using A Checkbox And A Gallery Control

Introduction

In this article, we will learn how to show or hide certain elements based on certain conditions. This can be useful in scenarios where you only want to display specific controls on the screen based on a user's selection. By using the Collect, Remove, and Concat functions, along with setting the visible.

Use case

Display only the controls(country flags) for the selected country using a checkbox with vertical gallery control and image control.

Below are the steps,

Step 1

Create a new PowerApp, and insert a new blank screen.

Step 2

Insert a gallery control and checkbox control within the gallery.

Step 3

Add a data source for the gallery control. For this demonstration, I will use the following SharePoint list (Country).

Step 4

Add the following commands on checkbox control events.

OnCheck event

// Collect the selected countries into a collection
Collect(
    collectContries,
    // If the checkbox value is true, add the current item's title to the collection
    If(
        Checkbox2.Value,
        ThisItem.Title
    )
);

OnUncheck event

// Remove an item from the collectContries collection
Remove(
    collectContries,
    // Remove record from collection with "Value", that matches the current item's title
    {Value:ThisItem.Title}
);

Step 5

Insert a label and set its text property to display a comma-separated list of selected country names using the collection.

// Display a comma-separated list of selected country names using the collectContries collection
"Selected countries: " & Concat(collectContries,
    // The value field from each record in the collection
    Value,
    // Separate each value with a comma and a space
    ", 
")

Step 6

Now, set the collection to conditionally set the visible property of a control to show or hide it.

// Check if the current item's title is in the collectContries collection
ThisItem.Title in collectContries

Output

Conclusion

In this article, we have learned how to conditionally display or hide controls in PowerApps using a checkbox and a gallery control. We created a SharePoint list (Country) as a data source for our gallery control, used checkbox events to add or remove selected country names to a collection, displayed a comma-separated list of selected country names using the collection, and finally used the collection to conditionally set the visible property of controls. By following these steps, you can easily create dynamic, user-friendly PowerApps that respond to user input.