Add alternate row color in gallery Power Apps

In Power Apps, to add alternating background colors to rows in a gallery, you need a sequential number (1, 2, 3, 4, 5, etc.), essentially an auto-incrementing ID value. This allows you to apply logic based on the ID field’s value.

The logic to implement is as follows: if the ID value is even, set the TemplateFill property of the gallery to dark grey, if the ID value is odd, set it to light grey.

There are two approach to add alternate background color to rows in gallery, lets look at them one by one.

First approach:

If your data source already includes an auto-increment field (1, 2, 3, etc.), such as a Row ID, and you are confident that this Row ID will never be deleted or updated, this approach can be beneficial.

Ensure that the items in the gallery are always sorted by the Row ID in sequential order, as this will support the alternating background color logic effectively.

Here, we have a gallery control displaying order data. You may notice that there is a Row ID field included.

Make sure that the items in the gallery are sorted by Row ID in ascending order.

Now, select the Gallery control, navigate to the TemplateFill property, and enter the following formula.

If( 
Mod( ThisItem.'Row ID', 2 ) = 0, 
RGBA( 211, 211, 211, 1 ), 
RGBA( 240, 240, 240, 1 ) 
)

This code will check if the Row ID value is even; if so, it will set the color to dark grey. If the Row ID value is odd, it will set the color to light grey

We have used Mod function to check even and odd value. If a number is evenly divisible by 2 with no remainder, then it is Even otherwise it is Odd.

Now, you can see that it adds alternating background colors to the rows in the gallery

The drawback of this approach is that if the Row ID value is deleted or updated in the future, or if sorting is removed from the Row ID or changed to another field, it may stop functioning correctly and yield incorrect results.

Let’s see what happens when we change the sorting. Sort the gallery items by Category and check whether this logic still works.

Once you change the sorting to Category, you will notice that it no longer works and produces incorrect results.

Some consecutive rows receive the same background color because the Row ID is not in sequential order; the items are sorted by Category instead.

Second approach:

In this approach, we generate sequential numbers for each row in the gallery using the Sequencefunction, rather than relying on an existing sequential ID field.

Essentially, the Sequence function creates a single-column table of sequential numbers, with the number of rows matching the total number of records in the gallery.

After that, we will use the Patch function to apply each sequential number generated by the Sequence function to the corresponding row in the gallery.

Next, we will use these newly created sequence numbers to check for even and odd values, and based on that, we will set the row color in a similar way as we did earlier in the TemplateFill property of the gallery.

Now, let’s go to the Item property of the gallery and enter the following code.

With( 
 {DataSource: Orders}, 
 ForAll( 
    Sequence(CountRows(DataSource)),
    Patch( 
         Last( 
           FirstN( 
               DataSource, 
               Value 
               ) 
            ), 
           {SeqNo: Value} 
         ) 
       )
      )

Once you have finished entering the formula, select it in the formula bar to see the output. You will notice that a sequential number named SeqNo has been added to the data.

Now, instead of Row Id field, let’s use this SeqNo in a gallery.

Now, go to TemplateFill property of gallery and write below code.

Remember this is the same code that we used in first approach but this time we are using SeqNo instead of Row Id field.

If( 
  Mod( ThisItem.SeqNo, 2 ) = 0, 
  RGBA( 211, 211, 211, 1 ), 
  RGBA( 240, 240, 240, 1 ) 
)

Now, you can see that it adds alternating colors to the background of the rows in the gallery.

There are no drawbacks to this approach. It will work in every scenario since we generate a sequential number through logic. This means there’s no need to sort the items in the gallery by any existing sequential number for it to function correctly.

Even if the items in the gallery are sorted by another field, or if you delete or update an existing Row ID in the future, it will still work.

Now, let’s sort the items in the gallery by Category.

With( 
{
 DataSource: SortByColumns(Orders,"Category",SortOrder.Ascending)
},
 ForAll( Sequence(CountRows(DataSource)), 
   Patch(
     Last( 
        FirstN( DataSource, Value ) 
         ), 
        {SeqNo: Value}
     ) 
   )

You can see that it still works, regardless of whether you change the sorting order to another field.