Toggling Checks in a PowerApps List

Sometimes you want to allow users to take actions on multiple items at the same time. One way to do this in an application is to include checkmarks next to the items in a list; however, doing this in PowerApps isn’t straightforward – and there’s a quirk around selecting checkboxes that you must work around. In this post, we’ll show you how to create a list where the checkmarks toggle on and off.

Collection of Items

To make this work, we’re going to need a collection of items. To make it simple, I’ve added the following to the OnStart of the first screen in the app:

ClearCollect(MyListOfItems,

{Key:“SSheep”, Description: “Sam Sheep”, Update: true},

{Key:“LLamb”, Description: “Lola Lamb”, Update: false},

{Key:“EEwe”, Description: “Ellen Ewe”, Update: false})

This gives us a simple collection to work with. There are two keys to this collection. First, there is a key field that we can use to look up an item. Second, there’s a Boolean flag that we can use to control visibility of the check.

One important thing: in the designer, OnStart won’t rerun after you’ve initialized the designer. Close out your form and reopen it in designer so that you get your collection.

Gallery

The next step is to create the Gallery. You can do this by selecting Insert and Blank Vertical Gallery. When the Data pane appears, select your collection of items – in my case, MyListOfItems – and go ahead and select a Layout of Title. This will give you a basic structure to work with.

Next, drag the label for title and make some space to the left of it for a checkmark. With the field still selected, from the Insert menu, select Icons and Check. This will put a check icon in the item template for the gallery.

Move to the property selector and select Visible. Then set the Visible property equal to ThisItem.Update

Now the checkmark will show for Sam – because update is true – but not for Lola or Ellen. To allow the Update property to be toggled, we’ll need to change the OnSelect event for the Gallery. Select the Gallery and then the OnSelect property from the selector. Note that we do this at the Gallery, because all the controls in the Gallery pass their selection up by setting their OnSelect to Select(parent).

Update Two-Step

Updating should be as easy as setting the property in the row – but it’s not. We need to signal to PowerApps that the data has changed. To do that, we’ll use Patch() – but of course, it needs a row in the item, which we don’t have, so we’ll look it up. Getting an item is as simple as

Lookup(MyListOfItems, Key =
Gallery1.Selected.Key)

The other consideration is toggling the update. That’s easy. Just use the Not() function around the existing value.

Putting the Patch() command together, we get:

Patch(MyListOfItems, Lookup(MyListOfItems, Key =
Gallery1.Selected.Key), { Update: Not(Gallery1.Selected.Update)})

Press run, and you’ve got a Gallery that supports toggling a checkbox.

ForAll

The last little bit is doing something with the data. For that, we use the ForAll() method. The first parameter is the collection to process. The next parameter is the code to run for each row in the data. Here we can evaluate the current row and decide what to do. For our sample, we’ll add a button that clears all the checkmarks.

Unfortunately, you can’t make changes to the data source or collection that ForAll() is operating on from inside of it – so we have to play a bit of a shell game. First, we’ll define a collection for our keys and then clear it out with:

ClearCollect(CheckClear, { Key:“Value”});

Clear(CheckClear);

Next, we’ll put the keys in the collection that we need to clear with:

ForAll(MyListOfItems,

If (MyListOfItems[@Update],

Collect(CheckClear, {Key: MyListOfItems[@Key]})));

Notice that we access a field in the collection with brackets and an at (@) sign. For each record where Update is set, we add an item in to our CheckClear collection. Next, we just have to process that collection to clear the items:

ForAll(CheckClear,

Patch(MyListOfItems, Lookup(MyListOfItems, Key = CheckClear[@Key]), { Update: false }))

There you have it. A list you can toggle and some help with what to do with the data when you get it.