Switching between Sheer UI and SPEAK modes in Experience Editor

  • In Sitecore XP 8.0 or later, Experience Editor Ribbon by default works in the SPEAK UI mode. In the previous versions of Sitecore CMS, Experience Editor used Sheer UI interface.

    Sometimes there may be a need to switch Experience Editor to use Sheer UI, for example due to the following reasons:

    • Maintaining the Experience Editor Ribbon customization that was developed previously for Sheer UI.
    • Performance optimizations for Experience Editor for certain usage scenarios.

    At the same time, the SPEAK UI mode has its own advantages:

    • Modern and flexible approach of customizing Experience Editor Ribbon.
    • Ability to configure Ribbon customization on the fly via item editing, no application restarts when applying changes.

    Please note: SheerUI mode is deprecated in Sitecore XP 8.1 and above. It will be removed in one of the upcoming Sitecore XP versions.

  • To switch Experience Editor to Sheer UI mode, you need to change your configuration to the following:

    • For non-MVC solution ('\App_Config\Include\Sitecore.ExperienceEditor.config' file):

      <pageextenders>
            <!-- Uncomment the page extenders below and comment the "Sitecore.ExperienceEditor.Speak.Ribbon.PageExtender.RibbonPageExtender" to switch to old SheerUI-based Experience Editor ribbon. -->
            <pageextender type="Sitecore.Layouts.PageExtenders.PreviewPageExtender, Sitecore.ExperienceEditor" />
            <pageextender type="Sitecore.Layouts.PageExtenders.WebEditPageExtender, Sitecore.ExperienceEditor" />
            <pageextender type="Sitecore.Layouts.PageExtenders.DebuggerPageExtender, Sitecore.ExperienceEditor" />
            
            <pageextender type="Sitecore.Shell.Applications.Preview.SimulatedDevicePreview.PageExtenders.PreviewExtender, Sitecore.ExperienceEditor" />
            
            <!-- Page extender for SPEAK-based Experience Editor ribbon.  -->
            <!--pageextender type="Sitecore.ExperienceEditor.Speak.Ribbon.PageExtender.RibbonPageExtender, Sitecore.ExperienceEditor.Speak.Ribbon" /-->
      </pageextenders>
    • When using MVC ('\App_Config\Include\Sitecore.MvcExperienceEditor.config' file):

      <mvc.renderPageExtenders>
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderExtendersContainer, Sitecore.Mvc.ExperienceEditor" />

              <!-- Uncomment the page extenders below and comment the "SPEAK-based" Experience Editor ribbon processors to switch to old SheerUI-based Experience Editor ribbon. -->
              <!-- The SheerUI-based Experience Editor ribbon.  -->
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderPageEditorExtender, Sitecore.Mvc.ExperienceEditor" />
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderPreviewExtender, Sitecore.Mvc.ExperienceEditor" />
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderDebugExtender, Sitecore.Mvc.ExperienceEditor" />

              <!-- The SPEAK-based Experience Editor ribbon-->
              <!--<processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.SpeakRibbon.RenderPageEditorSpeakExtender, Sitecore.Mvc.ExperienceEditor" />-->
      </mvc.renderPageExtenders>
  • To switch Experience Editor to SPEAK UI mode, you need to change your configuration to the following:

    • For non-MVC solution ('\App_Config\Include\Sitecore.ExperienceEditor.config' file):

      <pageextenders>
            <!-- Uncomment the page extenders below and comment the "Sitecore.ExperienceEditor.Speak.Ribbon.PageExtender.RibbonPageExtender" to switch to old SheerUI-based Experience Editor ribbon. -->
            <!--<pageextender type="Sitecore.Layouts.PageExtenders.PreviewPageExtender, Sitecore.ExperienceEditor" />-->
            <!--<pageextender type="Sitecore.Layouts.PageExtenders.WebEditPageExtender, Sitecore.ExperienceEditor" />-->
            <!--<pageextender type="Sitecore.Layouts.PageExtenders.DebuggerPageExtender, Sitecore.ExperienceEditor" />-->
            
            <!--<pageextender type="Sitecore.Shell.Applications.Preview.SimulatedDevicePreview.PageExtenders.PreviewExtender, Sitecore.ExperienceEditor" />-->
            
            <!-- Page extender for SPEAK-based Experience Editor ribbon.  -->
            <pageextender type="Sitecore.ExperienceEditor.Speak.Ribbon.PageExtender.RibbonPageExtender, Sitecore.ExperienceEditor.Speak.Ribbon" />
      </pageextenders>
    • When using MVC ('\App_Config\Include\Sitecore.MvcExperienceEditor.config' file):

      <mvc.renderPageExtenders>
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderExtendersContainer, Sitecore.Mvc.ExperienceEditor" />

              <!-- Uncomment the page extenders below and comment the "SPEAK-based" Experience Editor ribbon processors to switch to old SheerUI-based Experience Editor ribbon. -->
              <!-- The SheerUI-based Experience Editor ribbon.  -->
              <!--<processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderPageEditorExtender, Sitecore.Mvc.ExperienceEditor" />-->
              <!--<processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderPreviewExtender, Sitecore.Mvc.ExperienceEditor" />-->
              <!--<processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.RenderDebugExtender, Sitecore.Mvc.ExperienceEditor" />-->

              <!-- The SPEAK-based Experience Editor ribbon-->
              <processor type="Sitecore.Mvc.ExperienceEditor.Pipelines.RenderPageExtenders.SpeakRibbon.RenderPageEditorSpeakExtender, Sitecore.Mvc.ExperienceEditor" />
      </mvc.renderPageExtenders>

Applies to:

CMS 8+

October 09, 2015
February 15, 2017

Keywords: 

  • Experience Editor,
  • SPEAK