Customize 'Select a Rendering' window

Question

How can I add custom button on Select a Rendering dialog which comes up after clicking on Add here in Experience Editor, as shown below?

When click on this newly added button, below screen should open and content authors can add any rendering & that should override the placeholder setting.

The aim is to allow content authors to add any rendering if that rendering is not available in the existing placeholder setting through Select a Rendering dialog.

Answer 1

Based on the screenshot you shared, you are not using SXA. I did the implementation with a slight change from your requirement. So, when the user will click on the custom button, instead of opening a new dialog, I have just updated the inner html.

The reason is when opening a dialog, a pipeline id has been set and it becomes very difficult to manage it across different dialogs. Below is how I've implemented it.

Sitecore XAML file

You need to override the SelectRendering.xml to add your custom button and also to update the codebeside. All you need to do is to copy the SelectRendering.xml to the override folder. Steps are shown below.

1. Navigate to the path website directory/sitecore/shell/Applications/Dialogs/SelectRendering

2. Copy the file SelectRendering.xml to the path website directory/sitecore/shell/override/Applications/Dialogs/SelectRendering and paste the file there. Note that you may need to create the folders Applications, Dialogs and SelectRendering.

3. Edit the file. Below is my updated SelectRendering.xml.

<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
  <Sitecore.Shell.Applications.Dialogs.SelectRendering>
    <FormDialog ID="Dialog" Icon="Core/32x32/open_document.png" Header="Open Item" 
      Text="Select the item that you wish to open. Then click the Open button." OKButton="Open">
      <Stylesheet Src="SelectItemWithThumbnails.css" DeviceDependant="true" />
      <!-- <CodeBeside Type="Sitecore.Shell.Applications.Dialogs.SelectRendering.SelectRenderingForm,Sitecore.Client"/> -->
      <CodeBeside Type="Zerex.Framework.Client.Renderings.SelectRenderingExtension, Zerex.Framework"/>
      <DataContext ID="DataContext" Root="/"/>

      <GridPanel Width="100%" Height="100%">
          
        <GridPanel ID="MainGridPanel" Width="100%" Height="100%" Columns="3" GridPanel.Height="100%" Style="table-layout:fixed">
          
          <Scrollbox Width="100%" ID="TreeviewContainer" Height="100%" Class="scScrollbox scFixSize scFixSize4" style="border-right: 2px solid #474747;" Background="white" Padding="0px" GridPanel.Width="200px" GridPanel.Height="100%">
            <TreeviewEx ID="Treeview" DataContext="DataContext" ShowRoot="true" Click="Treeview_Click" />
          </Scrollbox>

          <VSplitter ID="TreeSplitter" GridPanel.Class="scThinSplitter" Target="left" />
          
          <Scrollbox ID="Renderings" Width="100%" Height="100%" Class="scScrollbox scFixSize scFixSize4" Background="white" Padding="0px" GridPanel.Height="100%">            
          </Scrollbox>
        </GridPanel>
                       
        <Border ID="PlaceHolderNameBorder" Visible="false" style="padding:12px 0px 0px 0px">
          <GridPanel Columns="3" Width="100%">
            <Literal Text="Add to Placeholder: " GridPanel.NoWrap="true" />
            <Space Width="4" />
            <Edit ID="PlaceholderName" Name="PlaceholderName" GridPanel.Width="100%" class="scQuirksBoxModel" Width="100%" />
          </GridPanel>
        </Border>
       
      </GridPanel>

      <Border ID="OpenPropertiesBorder" def:placeholder="Buttons" Visible="false" style="padding:0px 0px 8px 0px">
        <Checkbox ID="OpenProperties" Header="Open the Properties dialog box immediately." />
        <Space Width="500" />
        <Button ID="AdditionalRenderingButton" class='${StringUtil.GetString($OKButtonClass, "scButton scButtonPrimary")}' OnClick="AdditionalRendering_Click">
          <Literal Text="Additional Renderings"/>
        </Button>
      </Border>  
    </FormDialog>
  </Sitecore.Shell.Applications.Dialogs.SelectRendering>
</control>

The main differences that you will notice are

• The CodeBeside which is the namespace where my implementation is. (line 8)
• I added the ID MainGridPanel to perform the refresh. (line 13)
• Added Space and the custom button. (line 37 to 40)

C# Code

You need to override the SelectRenderingForm from the namespace Sitecore.Shell.Applications.Dialogs.SelectRendering in the Sitecore.Client.dll. Then, bind an OnClick EventHandler to the custom button.

using Sitecore.Web.UI.Sheer;
using Sitecore.Web.UI.WebControls;
using System;
using Sitecore.Shell.Applications.Dialogs.SelectRendering;
using Button = Sitecore.Web.UI.HtmlControls.Button;

namespace Zerex.Framework.Client.Renderings
{
    public class SelectRenderingExtension : SelectRenderingForm
    {
        protected Button AdditionalRenderingButton;
        protected GridPanel MainGridPanel;

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            this.AdditionalRenderingButton.OnClick += new EventHandler(AdditionalRendering_Click);
        }

        protected virtual void AdditionalRendering_Click(object sender, EventArgs e)
        {
            Renderings.Visible = true;
            TreeviewContainer.Visible = true;
            TreeSplitter.Visible = true;

            this.TreeviewContainer.Class = "scScrollbox";
            this.TreeSplitter.CssClass = "scThinSplitter";
            this.Renderings.Class = "scScrollbox";

            SheerResponse.Refresh(this.TreeviewContainer);
            SheerResponse.Refresh(this.Renderings);

            SheerResponse.SetOuterHtml("MainGridPanel", this.MainGridPanel);
            SheerResponse.SetOuterHtml("TreeviewContainer", (System.Web.UI.Control)this.TreeviewContainer);
            SheerResponse.SetOuterHtml("Renderings", (System.Web.UI.Control)this.Renderings);
        }
    }
}

When a user clicks on the button, it will hide the current display of the dialog and update it with the TreeView. The class attributes are required to update the css classes.

Result

NOTE

The custom button will appear also from the content editor when you are adding rendering via Presentation -> Details.