Alternating Row Colors in Power Apps

by Paul Rodrigues · December 8, 2019

You would think a basic feature such as alternating row colors in Power Apps would be a matter of setting a few properties. Hopefully a future update will give us this feature. In the meantime I will show you a workaround that works great with smaller data sets. Please note that this method is not recommended on large data sets. Continue reading and you too will become an Office Power User!

How-To-Set-Alternating-Row-Colors-in-Power-Apps

Setting Up The Data For The Demo!

Let’s start by putting some data together for this demo. You can put the following code in the onVisible of a new screen. Note that the key to making this work is to add a row number to your collection so that you have sequential numbers with odd and even numbers. We will use this row number later to assign the colors. You may be thinking why not just use the ID of the table? the problem with that approach is that when records are deleted you may have sequential ID’s such as 1,3,4,5,and 7 which will not produce alternating colors.

OnVisible:
Clear(colAlternativeRows);
ClearCollect(
colAlternativeRowsSub,
{
Load: “31210001”,
Carrier: “Diel Jerue”,
ETA: “7:30 AM”,
Status: “Shipped”
},
{
Load: “31210002”,
Carrier: “Diel Jerue”,
ETA: “8:30 AM”,
Status: “Shipped”
},
{
Load: “31210003”,
Carrier: “PM Transport”,
ETA: “9:00 AM”,
Status: “Loading”
},
{
Load: “31210004”,
Carrier: “Diel Jerue”,
ETA: “9:30 AM”,
Status: “Arrived”
},
{
Load: “31210005”,
Carrier: “Diel Jerue”,
ETA: “10:00 AM”,
Status: “Arrived”
},
{
Load: “31210006”,
Carrier: “PM Transport”,
ETA: “10:30 AM”,
Status: “Open”
},
{
Load: “31210007”,
Carrier: “Diel Jerue”,
ETA: “11:30 AM”,
Status: “Open”
}
);
ForAll(
colAlternativeRowsSub,
Collect(
colAlternativeRows, // See link below on how the Last and FirstN function work.
Last(
FirstN(
AddColumns(
colAlternativeRowsSub,
“RowNumber”,
CountRows(colAlternativeRows) + 1
),
CountRows(colAlternativeRows) + 1
)
)
)
)

Setting Up The Gallery for The Demo!

We will now insert a vertical gallery control and set the items property to the “colAlternativeRows” collection. Then we will drop a few label controls for the columns and set the appropriate template fill color.

Vertical GalleryControl:
- Items: Sort(colAlternativeRows,RowNumber,Ascending)
- TemplateFill:
  If(
  Mod(
  Value(ThisItem.RowNumber),
  2
  ) = 0,
  ColorValue(varColor2Chosen), // Replace with your color chosen.
  ColorValue(varColor1Chosen) //Replace with your alternate color chosen.
  )
Label: // Insert the following inside the gallery template.
- Text: ThisItem.Load
Label:
- Text: ThisItem.Carrier
Label:
- Text: ThisItem.ETA
Label:
- Text: ThisItem.Status

Now you know how to create alternating row colors in Power Apps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles are posted regularly.