Setting css class in SXA variant from content item

Question

I need to create a list of items in SXA with a background defined by the items themselves. On the items, the editor can select a colour (droplist). On the display, I want to use that colour as the background of that items tile.

I know that I can set css classes on the variants, but then they are fixed by the variant definition. I also know I can get fields from the item, but then they are just displayed and not in the class of a div or section.

I tried using a NVelocity template to open a div with the css class in it, but apparently SXA is too clever and closes the div for me (so the rest of my data is not in but after the div).

I considered using the rules engine to enable or disable part of the variant definition. But that seems weird, because I think I would need to create a variant section (including all needed children) for each possible colour.

Is this possible ootb? Or with a bit of custom javascript if necessary?

Answer 1

Yes, you can do it out of the box using tokens inside of the Data attributes field in the Rendering Variant. Take a look:

Each of my items has a Colour field:

And here is an example output (Page List in my case):

I'm fulfilling here style attribute but you can assign CSS class.

Additional information's: This feature will not work with reference fields (e.g. Drop Link) unless you want an URL of a terget item. So

• if you want CSS class name to be inserted in the data attribute you must use SingleLine-Text field (there is known issue with DropList field type).
• you can use reference fields if you want to get the URL of a target item. E.g.: you have an image field and you want to put a link to that image in the data attributes, in such case $(IMAGE_FIELD_NAME) will output link to that image.

Answer 2

From Sitecore 9.3, you can use Scriban templates to create your variant renderings, and you can now have easy access to the value of the DropLink.

If your field is in the rendering parameters, you can use: {{ sc_parameter 'Colour' }}

If your field is in the object's template, you can use: {{ i_item.Colour }}