In Power Apps, to add an alternate background color to rows in gallery, you need a sequential number (1,2,3,4,5..) or you can say an auto increment Id value so that you can apply the logic based on the value in Id field.
So, the logic that we need to implement would be like, if the Id value is Even then set the TemplateFill property of gallery to dark grey color or if the Id value is Odd then set to light grey color.
There are two approach to add alternate background color to rows in gallery, lets look at them one by one.
First approach:
If you already have an auto increment field (1,2,3,..) in your data source, lets say the auto increment Id is Row Id in your data source.
If you are sure that this Row Id value will never going to be deleted or updated in future and you make sure an items in gallery are always sorted by Row Id value only in sequential order then this approach is useful for you.
Here we have a gallery control, it is showing Order’s data. You can see, there is a Row Id field.
Items in gallery are sorted by Row Id.
Now, select gallery control and go to TemplateFill property and write below code.
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 then set the color to dark grey and if row id value is Odd then 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, it adds alternate background color to rows in gallery.
The drawback with this approach is that, if Row Id value is deleted or updated in future or sort is removed from Row Id or may be gallery items are sorted by some other fields then it will stop working and produce wrong result.
Let’s see what happens, if we change the sorting. Sort the gallery items by Category and check if this logic works or not.
Once you change the sorting by Category. You can see, it does not work and produce wrong result.
There are few consecutive rows get same background color. Because, Row Id is not in sequential order as items are sorted by Category.
Second approach:
In this approach, we create a sequential numbers for each row for records in gallery using Sequence function instead of using an existing sequential Id field.
Basically, the Sequence function generates a single column table of sequential numbers with number of rows equal to the total number of records in gallery.
After that, we will use Patch function to patch each sequential number generated by sequence function to corresponding row in the gallery.
Next, we use this newly created sequence number to check Even and Odd value and based on that set the row color in similar way as we did earlier in TemplateFill property of gallery.
Let’s go to an Item property of gallery and write below code.
With(
{DataSource: Orders},
ForAll(
Sequence(CountRows(DataSource)),
Patch(
Last(
FirstN(
DataSource,
Value
)
),
{SeqNo: Value}
)
)
)
Once you done with the code, just select the code in formula bar to see the output and you can see a sequential number named SeqNo is added to the data.
Now, instead of Row Id field, let’s use this SeqNo in 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 it add alternate color to background of rows in gallery.
There is no drawback with this approach, it will work in every scenario, as we are creating a sequential number through logic so there is no need of sorting an item in gallery by any sequential number to make it work.
If items in gallery are sorted with any other field, or if you delete or update an existing Row Id in future, it will still work.
Let’s sort an item in gallery by Category.
With(
{DataSource: SortByColumns(Orders,"Category",SortOrder.Ascending)},
ForAll(
Sequence(CountRows(DataSource)),
Patch(
Last(
FirstN(
DataSource,
Value
)
),
{SeqNo: Value}
)
)
)
You can see, it still works does not matter whether you change the sorting order with any other field.
Also Read..
Sequence function in Power Apps
Highlight selected item in gallery
Email validation in Power Apps
Sort Items in gallery Power Apps
Change Item color in gallery based on value
