I've decided to write this post based on the questions that I saw in the community channels. Here you will see how you can change the editing experience of component options in Sitecore pages.
The provided examples use O.O.B components from the SXA and I have changed some of the Templates for the sake of the demonstration. I do not suggest editing/changing the O.O.B Components.
With headless variants, you can have different presentations of the same component.
You can create the headless variant under the Presentation/Headless Variants. The variant name should match the export inside your react file. For example, the Image component has two variants defined in the Sitecore:
If you check the "src\components\Image.tsx" you will find these two exports which match exactly the variant name created in the Sitecore:
If you check the layout query for the page you will see the variant for the image component is returned:
Most of the component options are controlled by rendering parameters.
You can create your own rendering parameters, which will be shown under advanced styling.
For example, I have added a Tag field to the rendering parameters of the Image component:
Do not forget to set the Title field or your field name will be shown up as __Standard value in Sitecore pages:
And you can see it in the Sitecore pages:
Now the graphql query will return the new parameter, which you can use in your nextjs code.
The most important part is the inheritance of your rendering parameters, which I explain further:
Keep in mind the Base Rendering Parameters template is inherited from multiple templates.
IStyling Rendering parameter
Provide the styling options in Sitecore pages:
Your rendering parameter should inherit either from Base Rendering Parameters or from /sitecore/templates/Foundation/Experience Accelerator/Presentation/Rendering Parameters/IStyling
You may control the styles based on the definitions inside /sitecore/content/BasicSite/BasicSite/Presentation/Styles folder:
IComponentVariant Rendering parameter
provide the variant selection in Sitecore pages, Your rendering parameter should inherit either from Base Rendering Parameters or from /sitecore/templates/Foundation/Experience Accelerator/Variants/Rendering Parameters/IComponentVariant
Grid Parameters Rendering Parameters
provide the CSS grid options in Sitecore pages, Your rendering parameter should inherit either from Base Rendering Parameters or from /sitecore/templates/Foundation/Experience Accelerator/Grid/Rendering Parameters/Grid Parameters
IDynamicPlaceholder Rendering Parameters
Only if your components need to support the dynamic placeholders, add this to your rendering parameter: /sitecore/templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parameters/IDynamicPlaceholder
This is not specific to the rendering parameters. It will give you the option to have different standard values per site for the specific datasources or rendering parameters.
The Standard Value Module should be available for the target site and your template inherits from /sitecore/templates/Foundation/Experience Accelerator/StandardValues/_PerSiteStandardValues. Afterward, it will be shown up in the Standard Value dialog, given you have that component registered in one of the Available renderings sections:
IRenderingId Rendering Parameters
When your rendering parameter inherits from /sitecore/templates/Foundation/Experience Accelerator/Markup Decorator/Rendering Parameters/IRenderingId, you will see the ID inside the Sitecore pages:
This can be used for HTML Anchors, of course, your frontend should support this field, later you can use the links like:
<a href="#section2">Go to Section 2</a>
This is not a rendering parameter, I just mention it for the sake of completeness.
When your Datasource template inherits from the /sitecore/templates/Foundation/Experience Accelerator/Horizon/_HorizonDatasourceGrouping then inside the Sitecore pages, you will have the option to manage the children of the component inside Sitecore pages, an example is the O.O.B link list:
Richtext profile is currently not editable in Sitecore pages but it is on the roadmap.
I suggest, at the beginning of the project, talking to the customer and especially your frontend team about the available options, defining how much flexibility should be available for the components, and defining which components should have which of the options. For example, probably not all of the components need the grid or styling options.
Keep in mind there are three ways to change the Presentation of the component:
- Using Variants
- Using Styles
- Using Rendering Parameters
Talk to your front-end architect and try to find a uniform way of implementation and editing experience across all components. This is important not only for your developers but also for the content authors who later want to use the Sitecore Pages.