How to Highlight the Selected Item within a Power Apps Gallery?

In this Power Apps Tutorial, we will discuss highlighting a selected item within a Power Apps Gallery.

We recently received a request to work with the selected items of a Power Apps gallery while using the canvas app. Per our client’s request, they want to highlight the item selected within a Power Apps gallery.

Also, we will discuss how to highlight the multi-selected items within the Power Apps gallery.

Highlight the selected item within a Power Apps gallery

Here, we will see how to highlight the selected item within a Power Apps gallery. To achieve this requirement, the following steps are:

  • Let’s build a vertical gallery on the Power Apps screen.
  • Connect the gallery to a data source (Ex: SharePoint, Excel, dataverse table, etc.). Suppose, we have a SharePoint list named Project Management and we have used that list in the Power Apps gallery as shown below:
Power Apps gallery selected item
Power Apps gallery selected item
  • To highlight the particular item or selected item in the Power Apps gallery, insert the following expression on the gallery’s TemplateFill property.
TemplateFill = If(ThisItem.IsSelected, Color.AntiqueWhite, Color.White)

As per the above expression, the selected item will be highlighted as AntiqueWhite and the rest will appear in white.

Highlight the Power Apps selected item
Highlight the Power Apps selected item

This is how to highlight the Power Apps selected item in a gallery control.

Also, Read: How to Patch Dataverse Choice Column in Power Apps

Highlight multi-selected items in the Power Apps gallery

In this section, we will see how to highlight the multi-selected items in the Power Apps gallery.

Currently, we can select only one item in a Power Apps gallery control. But, we can add a temporary Power Apps collection to our app where we will store all the selected items from the gallery.

To achieve this, the followings steps are:

  • We have built a vertical gallery on the Power Apps screen that displays the list of all Office365 users.
    • For this, connect the Power Apps with the Office 365 Users connector. Add a vertical gallery to the Power Apps screen and insert the below expression on the gallery’s Items property. As a result, it will display all the Office 365 users in the Power Apps gallery.
Items = Office365Users.SearchUser()
Power Apps gallery select multiple items
Power Apps gallery selects multiple items
  • Now, we will create a collection that will temporarily store the selected items from the gallery. For this, add the below expression on the Power Apps gallery’s OnSelect property.
OnSelect = If(
    ThisItem.DisplayName in CollSelectedUsers.DisplayName,
    Remove(
        CollSelectedUsers,
        ThisItem
    ),
    Collect(
        CollSelectedUsers,
        ThisItem
    )
)

Where the CollSelectedUsers is the name of the collection that will store the multi-selected items.

Highlight the Power Apps multi selected gallery item
Highlight the Power Apps multi-selected gallery item
  • To identify the selected items, insert the following expression on the TemplateFill of the Power Apps gallery control.
TemplateFill = If(
    ThisItem.DisplayName in CollSelectedUsers.DisplayName,
    Color.AliceBlue,
    Color.White
)
Power Apps Highlight the multi selected gallery items
Power Apps Highlight the multi-selected gallery items
  • To visualize the selected items from the Power Apps gallery, let’s add another vertical gallery to the Power Apps screen.
  • Connect that vertical gallery with the collection that we have created. (i.e., CollSelectedUsers)
Select multiple items in Power Apps gallery
Select multiple items in the Power Apps gallery

That’s it! Let’s publish the app and preview it. we can see when we select the item(s), it will display on another gallery as well as highlight those selected items within the gallery.

Highlight the multi selected gallery item in Power Apps
Highlight the multi-selected gallery item in Power Apps

Similarly, if we deselect the item(s), it will remove from the other gallery as well. This is how to highlight the multi-selected items from the Power Apps gallery.

Additionally, you may like some more Power Apps tutorials:

Conclusion

From this Power Apps tutorial, we learned how to highlight a single selected item as well as multi-selected items within the Power Apps gallery.

>