Skip to main content

Sitecore

SXA Clone Rendering

Colorful Background

SXA Clone Rendering is a powerful feature in Sitecore Experience Accelerator that enables users to duplicate and customize existing renderings with ease. This feature can help improve productivity and streamline the web development process by allowing developers to reuse and modify existing components rather than building them from scratch. In this context, we will explore the benefits and steps involved in using the SXA Clone Rendering feature.

With the cloning component, you can utilize existing parameters, existing datasource templates, and existing views. We have the facility to use exact copies as well.

Before deep down into SXA cloning this article is for Beginners with Detail explanation and I highly recommended to refer official Sitecore doc for Copy and customize a rendering

Steps to follow

As SXA updates that override standard SXA toolbox section. To avoid this scenario, I would recommend creating a separate toolbox for customize components.

We can do this by creating a new module in SXA.

Add an SXA Module

  1. Go to /sitecore/system/Settings
  2. Create a new folder either in Feature or in Foundation
  3. In the menu popup, select Insert and then Module

Menu Popup

  1. In Create New module dialog box, fill up the fields

Module name:  Enter the module name, and the system will use this name as the folder name that relates to the modules.

Add to module group: Select the module for which module belongs to

System areas:  Create container folders for the system areas listed below

Module scaffolding actions: To install the new module with SXA scaffolding

Create New Module

  1. Click Proceed

The script runs and creates modules in each location mentioned in the systems areas

Note: It is recommended to install a new module on the Site. Select Site -> Scripts -> install Site Module, then select a new module and install it.

Clone rendering

In this article, we are going to create an “Extended Promo” from the Promo component

  1. Locate the rendering of the component, ideally, it resides under “/sitecore/layout/Renderings/Feature/Experience Accelerator” and go to the appropriate group
  2. Right-click on the component’s rendering and clone rendering under scriptsClone Rendering
  3. The Create Derivative rendering popup opens, be sure to give your component some meaningful name. Select an appropriate module and add rendering CSS classCreate Derivative Rendering
  4. Select Rendering parameters from drop-down options, selecting Inherit from existing rendering parameters                                  Cloning Parameters
  5. Select rendering datasources from drop-down options, selecting Inherit from existing datasourceCloning Datasource
  6. Select HTML view from the options, and you’ll get the view file from the path mentioned, selecting use original MVC view file

Mvc View File

 

After the component is created from cloning, go to the template and update fields as needed

Note:

If you created SXA cloning mistakenly in the wrong module or faced any issues just remove that step-by-step from the below path and try again

    1. /sitecore/templates/Feature/<module name>/   —> remove all entries related to clone rendering
    2. /sitecore/templates/Branches/Feature/<module name>/Available <module name> Renderings/$name    –>  Remove clone rendering entry from Renderings field
    3. /sitecore/system/Settings/Feature/<module name>/<module name> Site Setup/Rendering Variants/<rendering name>
    4. Remove available rendering entries if have any
    5. /sitecore/layout/Renderings/Feature/<module name>/<rendering name>

Add rendering into Toolbox

As we created cloned component, now we would add that component to the toolbox

  1. Navigate to the Presentation folder of the site and go to Available Renderings      Available Rendering
  2. Insert new available renderings by clicking insert –> Available rendering
  3. Enter the section name that you want to add and click OK
  4. Once you click on a section, in the Data section, click on edit for the Rendering field
  5. From select item popup, click the relevant rendering, and double click so that it moves to the list of selected items and hit OK                             Select Items

 

Now we can see new rendering is available in Toolbox

Select Rendering

Add the Data folder and Rendering variant Folder

Create a Folder under Site/data with the same name used for the component from the component’s folder template, it would be useful for the creation of global datasources

Extended Promo Data

Create a rendering variant from the Variants template with the same name used for the component, With the help of this we can create different rendering variants for component

Extended Promo Presentation

 

Troubleshooting

The view file does not exist

View file error

To resolve this issue, add a cshtml file with proper formatting as given in the existing cshtml under the path mentioned in the View Path field and try to clone again.

 

I hope you found this helpful!! Check out our Sitecore blog for more helpful tips and tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ankit Tawale

Ankit Tawale is a Senior Technical Consultant at Perficient based in Nagpur. He is a Sitecore Certified Developer with experience in Sitecore, SXA, JavaScript, CSS, and .Net MVC. He is passionate about discovering new technology and understanding the architecture that supports them.

More from this Author

Follow Us