SXA Column Splitter with Custom Column Rendering Parameters

Problem Statement

In a recent Sitecore SXA implementation, I needed to add column-specific rendering parameters (like background image, overlay options, etc.) to the Column Splitter component. However, SXA’s default behavior doesn’t support adding new rendering parameters scoped per column dynamically in the Experience Editor.

Despite creating the rendering parameters in the template, only default ones (like Styles or ColumnWidth) were picked up correctly with column-specific numbering (e.g., Styles1, ColumnWidth1). Custom parameters for each column (e.g., BackgroundImage1, BackgroundImage2, etc.) were not shown correctly or applied selectively.

Solution Overview

With help from Sitecore Support and further analysis, I implemented the following changes:

1. Created a custom processor and config file to override the existing processor to filter rendering fields based on the selected column.
2. Created a custom rendering parameters template inheriting from the standard Column Splitter template.
3. Extended the Column Splitter view to apply custom rendering parameters dynamically.

Step-by-Step Implementation

1. Patch getGridParametersDialogFields Pipeline

Patch the original RemoveRedundantSplitterFieldsDescriptors processor with your custom one:

2.  Custom Processor Logic

This processor keeps only the parameters relevant to the currently selected column:

3. Update the Column Splitter View

Update your Column Splitter.cshtml view to read and apply rendering parameters like BackgroundImage, Overlay, etc., per column:

Include logic for rendering background images, overlays, fixed backgrounds, and so on.

4. Create a New Rendering Parameters Template

Create a new Rendering Parameters template in Sitecore:

• Inherited from: Column Splitter Parameters
• Add fields like:
  • BackgroundImage1 to BackgroundImage8
  • Is Overlay1 to Is Overlay8
  • Overlay Color1 to Overlay Color8
  • Overlay Transparency1 to Overlay Transparency8
  • Z index1 to Z index8
  • Is Fixed1 to Is Fixed8

Outcome

• The Experience Editor now displays only the relevant fields for the selected column.
• Each column renders with its own background image, styling, and overlays.
• The custom Column Splitter is dynamic, scalable, and SXA-compliant.