UI Builder: dynamic background color when using repeater

[Casper6060]

I have customer where we need to have a grid of rows and columns, the columns are static, but the rows are dynamic, for each row we have 6 columns, 5 columns with checkboxes and the last one is a date time field. From what i know, there is no OOTB component that handles this, so i had to build my own by using containers, columns and grids inside some repeaters.

But when i do this, a repeater with 10 rows for an example, all the rows have the same background.

The best user experience would be to have alternating background colors.

But i have found no way of getting this to work, because background color is static.

And from what i know, there is no way to add custom css that can target specific CSS id's or classes.

In a future release, it would be great if you could create a CSS file and assign id's and classes to each component in UI Builder.

[Brad Tilton · Accepted solution]

UI Builder does not currently support dynamic styling which makes this sort of thing difficult. There are some components that expose limited styling through their properties like icons and some colors, but for the styling has to be static.

That being said, One option you have here is to use two different containers in your repeater for your rows, use different background colors for each, and then conditionally display them on even/odd rows. The big issue is that anything within those containers would need to be duplicated for both.

This is something we're looking at from a product roadmap perspective.