It is sometimes difficult to decide whether to create a new component or not in Sitecore Experience Accelerator, because SXA already offers a lot of components which are more than enough. You might not get a change to completely use all of them. But you should know how to create one.
In order to save time, the SXA offers you to completely clone a rendering and modify it with your requirements.
You first need to decide which component is comparably similar to your desired component.
For example you want to create a
Promo Component which caters other fields as well. I want to add an extra
icon, and two more
links. I don’t want to show the
Promo Text 2 and
Promo Text 3
I know you would say that why not create a
rendering variant and inherit the other fields in it by using
Well, In order to map the components provided by your client with same name and fields, it is better to create another Component instead of relying on the rendering variants. That creates a lot of clutter and lose the cool of the SXA.
You should count the existing OOTB components as the base and create your components depending on your desired results. Lets say you have created 10 variants for your
Promo and you have write the documentation for each of them, for how and when to use them. Wouldn’t it be great if you just say that, here is your
Intro Block component, just drop it and you feel free to use it. anywhere.
Lets get started with creating a
Intro Block Component, with the following fields.
Cloning a Sitecore Component
In order to clone the rendering I have decided to use the OOTB component
Promo that I will clone it. Just go to the Renderings folder and locate your
/sitecore/layout/Renderings/Feature/Experience Accelerator/Page Content/Promo
Right click on your
Promo Component and from the context menu select
Scripts and click on the
This will open a popup, which you can fill as per your design and development requirements. Fill it with the followings by providing the
rendering name and
CSS class relevant to your desired component.
parameters, I want to separate it from
Promo Component so I will make it as a copy of it.
datasource, I want to make it a copy of
Promo Component but follow the somewhat same hierarchy to show in my
Data folder in my current website. So I will make it as a copy of
For the view you can face some writing permissions from your server, and If that breaks you will have to clean every single bit of the Cloning process. I wont bother with it for now because I have access to my Server and I can do as I please, it is a good you select the
existing MVC view from my specified path. I have already put my component there in the specified path, As I want to put all my views in my
Custom Folder separate from other views to easily identify what are my files.
Now you can
Proceed with it. It will take a while to complete it.
Modifying the View
Go to your view file and change the class name for your component to the desired one. In my case it is
intro-block and leave everything as is.
Drop the component in your Experience Editor
Go to your site node, open any page and select the
Intro Block Component from it and drop it on your page. And create and select the desired datasource.
Here you have achieved almost the 70% of the desired results.
Modifying the Data Template
You are now at peace to modify the
Data Template for your component
I will put up with the followings with relevant data-types.
Now fill it with the actual content to show it properly in the Experience Editor.
You can now style it as per your design as all your fields are now appearing in Experience Editor. Or if you already have markup available so you can create the rendering variant for it.
Consider a multi-site solution that will host 100+ websites in it, and it want to use your built components as Global components with some minor tweaks in other themes based on each site.
You will notice that with each site you get base
CSS that overrides your
CSS so in order to get out of that misery it is good to clone a rendering and use your own
CSS base class that only you can handle and playing with other themes does not affect it.
In case your rendering does not show up in your components listing, go to
/sitecore/content/[tenant]/[website]/Presentation/Available Renderings/Page Content
and add the newly created component,
Feel free, to use it and share your feedback if you find it useful. Cheers!
How To Implement Series for SXA
Don’t forget to check my previous articles for SXA.