Alternate Row Colours in Power Apps Galleries
By Craig White
A recent comment on one of my posts asked how to colour alternate rows in a Power Apps gallery. That’s the topic of this post, where I’ll go through a couple of different methods and break down all the Power Fx we need to make it happen.
If you don’t care about the explanations and just want the logic, see below.
Add the following Power Fx to the Items property of your gallery:
// Generate unique row number per record retrieved
With(
{tvData: YourListOrTable},
ForAll(
Sequence(CountRows(tvData)),
Patch(
Index(
tvData,
Value
),
{RowNo: Value}
)
)
)
If the Items property of your gallery needs to include sorting or filtering logic, include it within a With function. Example below:
// Generate unique row number per record retrieved
With(
{
tvData:
// Sort, filter & data source logic
SortByColumns(
Filter(
YourListOrTable,
ChoiceColumn.Value = Dropdown.Selected.Value
),
"MyTextColumn",
SortOrder.Descending
)
},
// Generating row number logic
ForAll(
Sequence(CountRows(tvData)),
Patch(
Index(
tvData,
Value
),
{RowNo: Value}
)
)
)
With your Items property configured, add the following Power Fx to the TemplateFill property of your gallery. This will colour alternate rows, change the colour values accordingly to your needs:
// Colour alternate rows based on generated RowNo column
If(
Mod(ThisItem.RowNo,2) = 0,
Color.Azure,
Color.BlanchedAlmond
)
If you’d like the detail behind the logic, please keep reading 🙂
Example data
I have a SharePoint list that houses a sample of Star Wars battle data. A gallery in Power Apps shows the following fields:
1- SharePoint list ID; this generates automatically with each new entry.
2- Battle ID; the Title field in the list.
3- Battle Leader; single line of text field
4- Planet; Choice column.
5- Battle Won; Yes/No column.
The objective is to colour alternate with a different colour. This is a similar experience to how tables appear in Excel. Unlike spreadsheets, this isn’t done automatically in Power Apps, so we have to configure it ourselves.
The Mod function
One of the most important components to colour alternate rows in Power Apps galleries is the Mod function. According to the documentation, the function “returns the remainder after a number is divided by a divisor“.
For some, perhaps not the clearest of explanations – especially if you’re new to Power Apps. Let’s see the function in action against the sample data. This will hopefully provide additional context later.
The Mod function needs 2 pieces of information; an initial number, and the number you want to divide it by. Both values are mandatory:
// Power Apps Mod function pattern
Mod(Number, NumberToDivideBy)
In the context of Power Apps, we know that dividing a number by 2 will return either a 1 or 0. Let’s use that logic for our sample data.
In the gallery, I’ve added a label and used the SharePoint list ID column within the Mod function:
// Mod function based on List ID column
Mod(ThisItem.ID, 2)
We can see that a 0 represents any even-numbered list ID, and a 1 for any odd-numbered ID:
Establishing odd and even rows allows us to format them based on the 0 or 1 returned by Mod.
Method 1 - using SharePoint List ID
SharePoint list & library ID’s are system generated. These numbers are always unique and increment with every new entry.
To colour alternate rows using this in-built ID column, first we must select the gallery and access the TemplateFill property. In this property, we can add a simple If function to evaluate the output of the Mod function, and colour accordingly.
In the Power Fx sample below, I use in-built system colours. You can add in your own RGBA or Hex values if preferred:
// Option 1 - Using List ID
If(
Mod(ThisItem.ID,2) = 0,
Color.Azure,
Color.BlanchedAlmond
)
This gives us the desired outcome, alternate rows have a different colour. Happy days, right?
Unfortunately, this method is slightly flawed. Let’s look at two examples as to why.
1- Your gallery sorts data by another field.
In the example below, let’s sort the data by Leader instead of list ID. The formatting changes accordingly:
2- Deletion of a list item.
When this happens, the list ID will never be in use again. You can’t recreate a new item using a previously deleted ID. In the example below, the data is sorted by list ID, but ID 6 has been deleted. This has a similar impact on the list ID method:
This method is fine if you don’t plan on deleting any records from your list, or don’t plan on filtering or sorting your Power Apps gallery. If one or both of those are unlikely, see method 2.
Method 2 - custom row number
Perhaps a far more suitable method is to dynamically create a unique row number, per entry in our data source. Doing so expands its usage across Dataverse, SQL etc and not just SharePoint.
We can achieve this by using a combination of Power Fx functions; With, ForAll, Sequence, Index and Patch. I’ve previously covered the method to generate row numbers (here), we’ll be extending that method to help us.
To begin, we need the following Power Fx in the Items property of the gallery:
// Generate unique row number per record retrieved
With(
{tvData: MyDataTable},
ForAll(
Sequence(CountRows(tvData)),
Patch(
Index(
tvData,
Value
),
{RowNo: Value}
)
)
)
Let’s break that down into bitesize chunks.
The With function allows us to evaluate data and generate outputs, without having to store anything as a collection or variable. So, with our data source, we want to do some stuff.
For each record retrieved from the With function, we can use the Sequence function to provide a unique reference per record. This works inside a ForAll function, commonly used for looping through data but also constructs tabular data – which is what we need.
For each value generated with the Sequence function, we want to add that to a new column – called RowNo. We use the Patch function to do so. You might have used Patch before to submit records to a data source, but it has other data-shaping uses too. We’re not saving anything back to the data source here, simply adding a temporary column at runtime.
We can add a label to the gallery and set its Text property to ThisItem.RowNo. We now have sequential numbers to work with:
Note this time though, that no matter how we sort or filter the gallery, the RowNo output remains consistent – unlike method 1:
With that logic in place, we can access the TemplateFill property of the gallery. This time, we’ll use the Mod function to evaluate our generated RowNo field. This will colour alternate rows as intended, regardless of any applied filters or sorting to the gallery:
// Option 2 - Using custom row number
If(
Mod(ThisItem.RowNo,2) = 0,
Color.Azure,
Color.BlanchedAlmond
)
With active sorting:
With active sorting & filters applied:
// Generate unique row number per record retrieved
With(
{
tvData:
// Sort, filter & data source logic
SortByColumns(
Filter(
MyDataTable,
Choice.Value = Dropdown.Selected.Value
),
"MyTextColumn",
SortOrder.Descending
)
},
// Generating row number logic
ForAll(
Sequence(CountRows(tvData)),
Patch(
Index(
tvData,
Value
),
{RowNo: Value}
)
)
)
Thanks for reading. If you liked this article and want to receive more helpful tips about the Power Platform, don’t forget to subscribe or follow me on socials 😊
Bala
April 22, 2025The data, a well-chosen one, is. Much to the concept’s understanding, it aids.
Douglas
April 25, 2025Thanks for sharing Craig. I’ve rarely used the Sequence function in projects but good to see a very useful use case and that of the Patch function as well.