Why aren't SXA rendering variants available for the default "Page Structure" renderings?

Question

For nearly all of the default renderings in SXA, there's an associated rendering variant. And if I wanted to add a variant, in the Content Editor, I can go to presentation > rendering variant, and duplicate an existing variant and modify it as needed. This is not the case for any of the "Page Structure" renderings.

I wanted to create a variant for the "Container" rendering, so I tried right-clicking on Rendering Variants and selecting Insert from template and using the existing template found in /Feature/Experience Accelerator/Page Structure/Rendering Parameters/Container -- but even this threw an error: Field control has failed to render: index was outside the bounds of the array.

Why don't "Page Structure" renderings allow variants and is there a way around it?

Answer 1

The Page Structure components are not variant components. If you look at the underlying code of something like the Container vs Promo you will see that the controller is different. The promo uses a Sitecore.XA.Foundation.RenderingVariants.Controllers.VariantController, internally this will use the VariantsRepository and the view model is a VariantsRenderingModel. These do all the work of getting the rendering variants for the component.

A Container component builds off the DynamicPlaceholdersController. Components built off this are not designed to use Rendering Variants.

Container with rendering variants option:

If you want to create a "Container" like component, that uses rendering variants. The easiest way would be to clone an existing rendering variant component.

The first question to answer is, do you want your Variant Container to have a datasource item or not. If you do the Promo is the best to clone. If not, then clone the Page Content component. They both use the same razor view, but the Page Content component is already setup to not use datasources.

Clone the required component and call it something like Variant Container and then you can create your rendering variants for that. You will need to make sure that you add a Placeholder in your rendering variant.

Now you have a Container component that can have variants.

Notes: The new Variant Container will not have exactly the same markup as the existing Container component. It will have some extra markup around the rendering variant markup that all variant components have.