When dealing with a rendering variant field, it is not a big deal to set few data-attributes to it - those inputs are located at the very bottom of Variant Details section. You can do it like that:
But what if you need data attributes to the top level of component, which it Rendering Variant item itself? There isn't such an option!
Requirements are
- An id attribute (ie.
section-1, section-2, ... section-N)
- One or many data-attributes (ie. " User-friendly title", "Another user-friendly title", etc.)
- CSS class
section-with-anchor on those instances, which have both previous requirements implemented
All of the above should be set for the top node of a rendering - outside of the control of Rendering Variant. Thinking logically - if we ever could add the above to Rendering Variant item itself, then it would present on every single instance of that given rendering variant. We do have CSS-class field on Rendering Variant item, but as I said, we need this class to present only occasionally for some individual instances as per requirement so we cannot use that field.
Solution
That is where Rendering Parameters come into a play, as they apply per each individual rendering usage. Let's take a look!
1. ID of a component. That was the easiest as luckily default rendering parameters do support field for that:
2. Data-attributes do not exist in Rendering Parameters control, unlike id attribute. But since that is just a collection of Key-Value pairs, why not to convert them into a set of data-attributes on a component node. Not all, of them, of course, but those that start with data- as on an image below:
In order to pick them up and assign to a rendering view, I write a simple extension method:
public static MvcHtmlString RenderAllDataAttributes(this HtmlHelper helper)
{
var rendering = Sitecore.Mvc.Presentation.RenderingContext.Current.Rendering;
string additionalAttributes = String.Empty;
if (rendering?.Parameters != null)
{
foreach (KeyValuePair<string, string> parameter in rendering.Parameters)
{
if (parameter.Key.ToLower().StartsWith("data-"))
{
additionalAttributes += $"{parameter.Key}=\'{parameter.Value}\' ";
}
}
}
return new MvcHtmlString(additionalAttributes.Trim());
}
It can be called like that:
<div @Html.RenderAllDataAttributes() @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "default-class", Model.Attributes)>
<div class="component-content">
...
</div>
</div>
3 Setting a style class. As mentioned before, do not misuse Css Class field of rendering variant definition for styling a specific implementation of rendering variant. Style that are applied individually for each instance of rendering (regardless of variant selected) can be found at that same Rendering Parameter window, located at Styling section.
Of course, you may need to create this style beforehand, if not yet done. To do so, create a new Style item underneath Styles grouping item and restrict to renderings where give style can be shown. That is a part of your style them and is located under /sitecore/content/Tenant/Site/Presentation/Styles node:
Result
Finally, I got it all rendered as expected:
That blog post shows how useful Rendering Parameters are, hope you find it helpful!