Fortunately, this assumption turned out to be incorrect. There are actually a number of ways to leverage SXA rendering variants to refine and customize the structure of your components, to the point that you can take custom markup and reproduce it within the child structure of a rendering variant to create the desired output.
Let us take a simple markup snippet, which we can then recreate as an SXA rendering:
Our first step will be to create a template and rendering for this new component. On the template (call it something like ‘My Variant’), let’s create a couple single line text fields to populate the h3 and p tags: “Title” and “Content”.
For the rendering, we will take advantage of the existing SXA RenderingVariantsController (again, we don’t want to write any code for this!). The easiest way to do this is to duplicate one of the existing SXA renderings (such as Promo – which already has a Controller and Action defined) and then update the Datasource Template field to point to our new template.
Note: If you want to optimize Experience Editor for your users, you can also create a custom data folder template and reference it in the Datasource Location field of the rendering (as seen above)
Now we have to create the actual Rendering Variant for our component, in which we will define the structure (and reference any necessary CSS classes). Similar to how we copied an existing rendering above, let’s make a copy of an existing item in the /sitecore/(path of site)/Presentation/Rendering Variants folder. Once again, I will duplicate Promo and call it ‘My Variant’. Then we want to clear out everything under the ‘Default’ node so that we can build out our own structure.
Under ‘Default’, insert a Section (for simplicity’s sake, you can leave the name as ‘Section’ for now – for more complex variants you may want to choose meaningful names). This will represent our top-level Div from the markup example above, so in the CSS class field, put the class “custom-variant” to match our markup.
From here we simply want to follow the structure of our markup to create the variant structure. Under the Section, insert an Html tag and call it ‘h3’, then choose ‘h3 from the ‘Tag’ field dropdown. Finally, in the ‘Field name’ field, enter ‘Title’ (as we defined in our template earlier). Do the same for the ‘p’ tag, giving it an appropriate name, choosing ‘p’ in the ‘Tag’ field, and entering “Content” in the ‘Field name’ field.
Note how the Variant structure matches our HTML structure, and that the CSS class of the Div is defined in the CSS class field.
Now, all that’s left to do is add your Rendering to the toolbox (at the time of this writing, you’ll need to manually scroll to the ‘Add a new rendering to the toolbox’ section of this article) and you are all set to add your custom component to an SXA page!
This basic approach works well, and you can quickly add complexity to do trickier things, like leveraging a Pass Through field to access an item from a link field or create markup for a list of items. SXA gives you a number of ways to expedite your development process, and there is always more to learn.