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.
Navigate to the path website directory/sitecore/shell/Applications/Dialogs/SelectRendering
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
.
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
.
FormDialog.xml
to add the new button and then you'll need to manage it when to be displayed as there are other dialogs apart from "Select Rendering" that make use of theFormDialog.xml
– Hishaam Namooya Nov 9 '20 at 19:45