Share

LinkedIn

Retrofit Sitecore 8.0 Experience Editor Scripts

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!


Sitecore development, Sitecore custom code, Sitecore SPEAK

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image:

Ben Golden said: 11/16/2015 at 12:17 PM

See also: http://jockstothecore.com/8-1-experience-editor-javascript-apis/
My solution does not solve the issue with TranslationsUtils changing to TranslationUtil

Prabhat said: 1/2/2017 at 10:52 AM

Thanks :)