How to use HTML helper to render a SXA component in Razor view
If you are migrating from traditional Sitecore to SXA, you may find part of your traditional component markup can be replaced with out of the box SXA component. Or if you are already using SXA you may find a need to reuse a SXA component or its Rendering Variant inside of your custom component's view. In my case, after building a custom Search Results component I realized that I can reuse one of the custom Rendering Variants I created for a Bootstrap Card markup to render search result item of my custom component. It allowed me to reuse the markup I created using Rendering Variant there by eliminating duplication of code.
To render a component in your Razor view you can use the @Html.Sitecore().Rendering(path or id) helper. This works fine for rendering traditional Sitecore components. However, this helper was not built to accept the parameters required for SXA components, for e.g. the rendering variant name or id. I couldn't find any documentation on doc.sitecore.com on how to use this helper method to render SXA component, so I logged a support case with Sitecore. They didn't have an immediate answer either but eventually they got back to me with one in few weeks.
As the HTML helper method doesn't accept all the required parameters to render SXA component we need to pass them in a dynamic additional parameters object.
For example:
From the example, you can see the first parameter is the component's Rendering Id. The second parameter is a dynamic object with Pamrameters and Datasource properties. The Parameters property of the dynamic object holds all the parameter values required to render the SXA component. The values are passed in URL query string format separated by '&'. The FieldNames parameter holds the value of Rendering Variant Id. Given there is no official documentation available for the SXA component parameter names and values the best way to get the correct names and values is by configuring you component inside Render Component field of a Rendering Variant and copying the raw value of the Rendering Parameters field.
Here are few simple steps to do that:
As the HTML helper method doesn't accept all the required parameters to render SXA component we need to pass them in a dynamic additional parameters object.
For example:
From the example, you can see the first parameter is the component's Rendering Id. The second parameter is a dynamic object with Pamrameters and Datasource properties. The Parameters property of the dynamic object holds all the parameter values required to render the SXA component. The values are passed in URL query string format separated by '&'. The FieldNames parameter holds the value of Rendering Variant Id. Given there is no official documentation available for the SXA component parameter names and values the best way to get the correct names and values is by configuring you component inside Render Component field of a Rendering Variant and copying the raw value of the Rendering Parameters field.
Here are few simple steps to do that:
- Create a new Rendering Variant under Page Content and name it Sample.
- Right click on the Variant Definition and insert Component field and leave the name as Component.
- Select the Component in the Rendering Item field (Breadcrumb in this case) and Save.
- Configure the Rendering Parameters using the configure button. Select all the required properties and styles and click OK to close the dialog.
- In the Content Editor's view tab check Raw Values checkbox, copy the Rendering Id value from Rendering Item field to pass as Rendering Id parameter of HTML helper.
- Copy the value of Rendering Parameters field and use a online URL decoder to decode the value.
- Use the decoded value in the Parameters property of the additional parameters dynamic object.
My final HTML helper looks like below
You can delete the Rendering Variant you created above after copying the required parameter values.
If you have any questions post them in the comments section.
Comments
Post a Comment