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:

• 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.

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()

• 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.

• 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
)

• 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)

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.

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:

• Power Apps Gallery SharePoint [With 15+ Examples]
• How to Display Dataverse Choices in Power Apps Gallery
• How to use Power Apps Gallery Dropdown
• Power Apps Gallery Group By [With Real Examples]
• Power Apps Gallery Patch [With Various Examples]

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.