Alternating Row Colors in Power Apps

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.

Additional Resources

How to change the color theme during run time in PowerApps
Excellent Explanation of the Last and FirstN Functions to Create Row Numbers

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *