PowerApps: Highlight Selected Item In Gallery

Hello Friends,

Welcome back with another post on PowerApps. Sometimes, the client asks that when a user clicks on any row in gallery, it should be highlighted. As of know, there is no direct feature. However, we can achieve using a very small piece of code. The expected outcome is-

1. 
2. 

Let's start-

1. First create a list "EmployeeInfo" in SharePoint and have some records.
1. 
2. Now, open the PowerApps maker portal and create a canvas app.
1. 
3. There will a screen by default "Screen1". Rename it to "ScreenViewByExperience".
4. Add the list "EmployeeInfo" as DataSource.
1. 
2. 
5. Now, add a "Blank flexible height gallery" and rename it to ParentGallery.
1. 
2. 
6. Update below properties of "ParentGallery"-
1. X: 0
2. Y: 100
3. Width: ScreenViewByExperience.Width
4. Height: ScreenViewByExperience.Height-ParentGallery.Y
5. Items: Distinct(EmployeeInfo,Experience.Value)
7. Now, click on template edit icon and add a "Label" and another "Blank flexible height gallery".
1. 
8. For Label, update below properties:
1. Name: Label_Experience
2. Text: ThisItem.Result
3. X: 0
4. Y: 0
5. Width: Parent.Width
6. Height: 40
7. Fill: RGBA(0, 13, 75, 1)
8. Color: RGBA(255, 255, 255, 1)
9. The outcome will be-
1. 
10. Similarly, update the properties of child gallery as below
1. Name: ChildGallery
2. X: 0
3. Y: Label_Experience.Y+Label_Experience.Height
4. Width: Parent.Width
5. Height: Parent.TemplateHeight-Label_Experience.Y-Label_Experience.Height
6. Items: Filter(EmployeeInfo,ThisItem.Result in Experience.Value)
7. TemplateSize: 40
8. TemplatePadding: 0
11. The outcome will be-
1. 
12. Now, edit the ChildGallery again and add 2 labels to show "First Name" and "Last Name". Link them with ThisItem.'First Name' and ThisItem.'Last Name'.
1. 
13. We have the basic structure ready. Now, comes to the actual part.
14. Click on App >> OnStart property and add below code.

1. Set(vrSelectedItemID,0);
   Set(vrClickCounter,0);
   

15. We have initialized 2 variables-
1. vrSelectedItemID- It will capture the ID of the item, user has clicked and will be used to validate the upon next click whether the same item is re-clicked or other item is clicked.
2. vrClickCounter- It will capture the count of click for a particular item
3. 
16. Now, click on ChildGallery >> OnSelect property and write below code

1. If(
       vrClickCounter = 0,
       Set(
           vrClickCounter,
           1
       );
       Set(
           vrSelectedItemID,
           ChildGallery.Selected.ID
       );
       ,
       If(
           vrClickCounter = 1 && vrSelectedItemID = ChildGallery.Selected.ID,
           Notify(
               Concatenate(
                   ChildGallery.Selected.'First Name',
                   " ",
                   ChildGallery.Selected.'Last Name'
               ),
               Success
           );
           ,
           Set(
               vrSelectedItemID,
               ChildGallery.Selected.ID
           );
       )
   )

17. The outcome is-
1. 
18. Next, click on ChildGallery >> TemplateFill property and write below code.

1. If(vrSelectedItemID = ThisItem.ID,RGBA(244, 196, 48, 1),RGBA(0, 0, 0, 0))
   

19. The outcome is-
1. 
20. Save the application, publish it and run/play.
21. On Load-
1. 
22. Clicked "Deepika Gupta"
1. 
23. Clicked "Manoj Sharma"
1. 
24. Re-Clicked "Manoj Sharma"
1. 
25. This is how, you can achieve the functionality. If you want to navigate to another screen upon double click, then instead of using Notify, use Navigate function.
26. In case, if you wish to give user the "Hand" experience upon hover, then replace the labels used in child gallery with buttons and update the properties as below-

27. Color	RGBA(0, 13, 75, 1)
    Fill	Transparent
    BorderColor	Transparent
    DisabledColor	Self.Color
    DisabledFill	Self.Fill
    DisabledBorderColor	Self.BorderColor
    PressedColor	Self.Color
    PressedFill	Self.Fill
    PressedBorderColor	Self.BorderColor
    HoverColor	Self.Color
    HoverFill	Self.Fill
    HoverBorderColor	Self.BorderColor
    BorderStyle	None
    BorderThickness	0
    OnSelect	Select(Parent)
    BorderRadius	0

28. After replacing labels with buttons, below is the outcome-
1. 
2. 
29. As we can see, there is no difference in the outcome. However, when you hover the mouse upon the item, you will find the cursor converted into Hand.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !