an abstract image of a grid adhering to waves with various spotlights of teal and purple

Retrofit Sitecore 8.0 Experience Editor Scripts



Ben Golden
Ben Golden

Sitecore 8.0 and 8.1 want different JavaScript for Experience Editor ribbon buttons and client pipelines. This post shows how you can retrofit 8.0 so you can use the same scripts in both versions.

Sitecore 8 introduced a new Speak-based ribbon in page editor. Several other people have already blogged about how you can support this ribbon with your own custom ribbon buttons. If you are not already familiar with those blogs, you should probably read at least one of them before continuing.

As you saw in those posts, the Speakified ribbon buttons require a JavaScript command that looks something like this:

define(["sitecore"], function(Sitecore) {
  Sitecore.Commands.MyCommand =
  {
    canExecute: function(context) {
      return true;
    },
    execute: function(context) {
      context.app.disableButtonClickEvents();
      Sitecore.ExperienceEditor.PipelinesUtil.executePipeline(
        context.app.MyCommandPipeline,
        function () {
          Sitecore.ExperienceEditor.PipelinesUtil.executeProcessors(
            Sitecore.Pipelines.MyCommand, context);
        });
        context.app.enableButtonClickEvents();
    }
  };
});

In Sitecore 8.1, the Experience Editor script was refactored. Where before you had Sitecore.ExperienceEditor, now you have to load it as a dependency using RequireJs. The same command would look like this in Sitecore 8.1:

define(
  ["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"],
  function(Sitecore, ExperienceEditor) {
    Sitecore.Commands.MyCommand =
    {
      canExecute: function(context) {
        return true;
      },
      execute: function(context) {
        context.app.disableButtonClickEvents();
        ExperienceEditor.PipelinesUtil.executePipeline(
          context.app.MyCommandPipeline,
          function () {
            ExperienceEditor.PipelinesUtil.executeProcessors(
              Sitecore.Pipelines.MyCommand, context);
          });
          context.app.enableButtonClickEvents();
      }
    };
});

The difference is small but significant. If you use the 8.0 version in 8.1 you will get an error stating that Sitecore.ExperienceEditor.PipelinesUtil is undefined. If you use the 8.1 version in 8.0, you get an error from RequireJs because it can’t find the ExperienceEditor.js file.

The client pipelines have the same issue. A processor for a client pipeline in Sitecore 8.0 might look like this:

define(["sitecore"],
  function(Sitecore) {
    return Sitecore.ExperienceEditor.PipelinesUtil.generateRequestProcessor(
      "MyPipeline.GetDialogUrl",
      function(response) {
        response.context.currentContext.value = response.responseValue.value;
      });
});

In 8.1 it would look like this:

define(["/-/speak/v1/ExperienceEditor/ExperienceEditor.js"],
  function(ExperienceEditor) {
    return ExperienceEditor.PipelinesUtil.generateRequestProcessor(
      "MyPipeline.GetDialogUrl",
      function(response) {
        response.context.currentContext.value = response.responseValue.value;
      });
});

If you are building a module that needs to support multiple versions, this small difference is going to cause you some major headaches. Fortunately, it is easy to fake the new ExperienceEditor dependency in Sitecore 8.0. Just create a file named ExperienceEditor.js with the following script and drop it in the  /sitecore/shell/client/Sitecore/ExperienceEditor folder.

define(["sitecore"], function (Sitecore) {
    return Sitecore.ExperienceEditor;
});

That’s all there is to it.  Now Sitecore 8.0 can use the same client-side command and pipeline scripts as 8.1. Just make sure you don’t deploy that file to an instance of 8.1 or you’ll overwrite the real file!

 

Let's Get Started

We'd love to hear from you. We probably have a lot in common. I mean, you like chatting about data-binding, UX patterns, and javascript functions, right?

X

Cookies help us improve your website experience. By using our website, you agree to our use of cookies and our privacy policy.

Accept