PowerApps: Nested Gallery - Alternate Row Color

Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery and then we have applied the Expand / Collapse feature on that gallery. Then we applied Expand All / Collapse All.

1. PowerApps: Nested Gallery
   
2. PowerApps: Nested Gallery - Expand / Collapse
   
3. PowerApps: Nested Gallery - Expand All / Collapse All
   

Now, we will try to add Alternate Row Color in nested gallery (Items gallery). For this, we will add a dynamic column RowNumber and assign a sequential value to it. Then we will use this RowNumber to define the color of rows. But Before start, I assume that you had visited all the three posts above and created the PowerApps as described. Let's start for further implementation.

1. Click on GalleryItemDetails gallery and select the Items property. Right now it is mentioned as ThisItem.ListItemDetails.
2. Now, change the function with below-

3. With(
       {RecordsListItemDetails: ThisItem.ListItemDetails},
       ForAll(
           Sequence(CountRows(ThisItem.ListItemDetails)),
           Patch(
               Last(
                   FirstN(
                       RecordsListItemDetails,
                       Value
                   )
               ),
               {RowNumber: Value}
           )
       )
   )
   

4. 
5. Further, select the TemplateFill property of the same gallery (GalleryItemDetails) and add below function. It will check if Mod value is ZERO (means even number row) then it will apply one color otherwise (odd number row) other color.

6. If(Mod(ThisItem.RowNumber,2)=0,RGBA(241, 244, 209, 1),RGBA(200, 200, 200, 1))
   

7. 
8. Save the PowerApps and execute/play. The magic works. 🙂
9. 
   
   
10. This way, we can add Alternate Row Color in PowerApps Gallery.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !