3

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?

enter image description here

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

enter image description here

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.

2
  • The above is feasible but quick question: Why not just remove the compatible rendering from the multilist since you are allowing content authors to add any rendering. The issue here is you'll need to override different xml controls starting with the 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 the FormDialog.xml – Hishaam Namooya Nov 9 '20 at 19:45
  • @HishaamNamooya I can remove all the rendering from placeholder setting's allowed control field and make it empty, so that content authors can add any rendering. But content authors wont have visual of a rendering (how its look like). So they want both - visual of a rendering (on Select a Rendering window) and flexibility to add any rendering on the go. – Siddharth Nov 10 '20 at 4:26
4

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

enter image description here

NOTE

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.