Alternate Row Color in Power Apps Gallery

Do you know how to make alternate row colors in the Power Apps gallery? No worries!

In this Power Apps tutorial, I will show you how to make alternate row color in Power Apps Gallery Control with some simple scenarios.

Recently, I received a request from a client asking me to create alternate row colors in the Power Apps Gallery control.

Alternate Row Color in Power Apps Gallery

Alternating row color is a user interface design technique where rows in a table or list are displayed with alternating backdrop colors to make them easier to read and identify between the rows.

Assume, for example, that the Power Apps gallery control’s first row of items has a white background, followed by a wheat background in the second item/row, a white background once more in the third item/row, a wheat background in the fourth item/row, and so on.

This makes it simpler to read the list’s items, particularly when there are many of them. Refer to the screenshot below.

This is all about Alternate Row Color in Power Apps Gallery.

Also, Read: How to Select First Item in a Power Apps Gallery

Power Apps Gallery Alternate Row Color

The Gallery data must first be shaped by adding sequential row numbers.

Power Apps Patch, Sequence, and CountRows functions can all be used to achieve this. I’m using the SharePoint List in the example below, and I’ve added a row with the name rowIndex.

The number of rows in the table of sequential numbers that are generated by the sequence is the same as the number of rows in the gallery. The gallery table’s connected entry for each value is patched to it.

Follow the instructions below to work around this:

Below represents the SharePoint List (Employee Onboarding) that I have used with various fields and records:

Example – 1:

• In Power Apps, create a blank canvas app and connect the SharePoint List Data source (Employee Onboarding) to the app.
• Insert a Vertical Gallery Control and set its Layout and Wrap count property as:

Layout: Image, title, subtitle, and body
Wrap count: 3 

• Next, select the gallery control and apply the code below on its Items property as:

Items = With(
    {Records: 'Employee Onboarding'},
    ForAll(
        Sequence(CountRows(Records)),
        Patch(
            Last(
                FirstN(
                    Records,
                    Value
                )
            ),
            {rowIndex: Value}
        )
    )
)

Where,

1. Records = Define a scope name
2. ‘Employee Onboarding‘ = Specify the SharePoint List Name
3. rowIndex = Provide a name to create a sequential row number for the data source

• If you select Data type: Table after applying the formula, you can look at the most recent row index number created in the data source as below.

• Now, go to the TemplateFill property of the gallery and apply the below formula:

TemplateFill = If(
    Mod(
        ThisItem.rowIndex,
        2
    ) = 0,
    Color.Wheat,
    Color.White
)

Where,

rowIndex = Specify the sequential row number name

• The Mod function is used in the formula above to determine whether the current row’s index is even or odd.
• If the outcome is 0, the row is considered even and the background color is changed to Wheat. If the outcome is 1, the background color is set to White, and the row is considered odd.

Also, instead of using the Color property, we can use the color code in RGBA like (RGBA(255, 255, 255, 1)).

Now have a look at the below scenario.

Example – 2:

In the second example, suppose a user wants only to alter the gallery row color after each of two items. That means, the first two items of the gallery should display with White color, then the third items should display with Wheat color.

Once more, the fourth and fifth items should be displayed in White, followed by the sixth item in Wheat, and so on. Refer to the image below.

• To achieve this, add a Vertical Gallery control and set its Layout and Wrap count property as:

Layout: Image, title, subtitle, and body
Wrap count: 2 

• Then, go to the TemplateFill property of the gallery and apply the formula below:

TemplateFill = If(
    Mod(
        ThisItem.rowIndex,
        3
    ) = 0,
    Color.Wheat,
    Color.White
)

Where,

rowIndex = Specify the sequential row number name (that we have created in the above example – 1)

This is how to display the alternate row color in Power Apps Gallery Control.

Moreover, you may like some more Power Apps tutorials:

• How to Display Dataverse Choices in Power Apps Gallery
• Power Apps Gallery Group By [With Real Examples]
• How to use Power Apps Gallery Dropdown
• Power Apps Gallery SharePoint [With 15+ Examples]
• Power Apps Modern Controls

In this Power Apps tutorial, we saw how to make alternate row color in Power Apps Gallery Control with different scenarios.