3

enter image description here

Anyone know how I might edit the EE ribbon so that the Preview is always the 2nd option (i.e. the button) as opposed to Other? This just adds an additional step every time you toggle between edit and Preview mode. Irritating if you aren't using Debug or Explore option (i know my client won't). It's usability issue that my client has commented on.

6

Explanation is below if you want to know more details. But here's what you need to do.

  1. Switch to Core DB inside the Desktop.
  2. Open Content Editor and go to:

    /sitecore/content/Applications/WebEdit/Ribbons/Chunks/Modes

  3. Copy the Experience Editor item (sort it accordingly) and update the values:

    Header: Preview

    Icon: Office/24x24/preview.png

    Tooltip: Preview item.

    ID: PreviewRibbonButton

    Enabled: true

    SpriteIcon: Sprites/Experience Editor Speak Ribbon/24x24/Preivew

    Display Name: -blank-

  4. Now open the Presentation Details and click on the LargeButton rendering.

  5. Update the values as follow:

    Command: Preview

    ControlStateRequest: ExperienceEditor.Mode.CanSelectMode

    HideInPreviewMode: true

    PageCodeScriptFileName: /sitecore/shell/client/Sitecore/ExperienceEditor/Commands/Preview.js

  6. Click OK twice.

At this time, switch to the Master DB and you should now see the new Preview button. If you click it, you will get an error. This is because, we haven't created the Preview.js.

  1. In Windows Explorer, go to the directory that contains the commands JSes:

    sitecore\shell\client\Sitecore\ExperienceEditor\Commands

  2. Copy the SelectMode.js and name it Preview.js.
  3. Update Preview.js by replacing line 17 from this:

      context.currentContext.value = encodeURIComponent(context.currentContext.argument + "|" + ExperienceEditor.getPageEditingWindow().location);
    

to this:

      var previewMenuItemId = "{CD96B740-8FBB-4722-8154-2FBCC72B374C}"; // Menu item (see below)

      context.currentContext.value = encodeURIComponent(previewMenuItemId + "|" + ExperienceEditor.getPageEditingWindow().location);
  1. Save the file.

Now, refresh (may need a hard-refresh) the Experience Editor and try the Preview button again. It should now work!!!

HOW IT WORKS?

The mode selection is through the existing Speak Command SelectMode which is defined in the Commands folder I mentioned above. This command runs the processor ExperienceEditor.Mode.SelectModeRequest which is defined in the config.

This request processor essentially looks at the SPEAK's RequestContext.Value for a content item ID that has the Message field in it (Menu item template). This field should have the "webedit:preview" as it s value.

So, knowing that we have Preview working before under the Other button, I used that item ID (in the Core DB):

/sitecore/content/Applications/WebEdit/Menus/Other Views/Preview

Note* that since I don't know how to pass an "argument" to a Command through the LargeButton rendering, I have to make a copy of the SelectMode.js and pass the content ID explicitly. I tried to see how an argument is passed but there doesn't seem to be a way.

1

In the Core database, just change the order of the item /sitecore/content/Applications/WebEdit/Menus/Other Views/Preview.

enter image description here

enter image description here

1
  • That would work for order but I am looking to make Preview the button instead of Other – Dan Murphy Mar 1 '18 at 15:49

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.