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.
Explanation is below if you want to know more details. But here's what you need to do.
- Switch to Core DB inside the Desktop.
- Open Content Editor and go to:
/sitecore/content/Applications/WebEdit/Ribbons/Chunks/Modes
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-
Now open the Presentation Details and click on the
LargeButton
rendering.Update the values as follow:
Command: Preview
ControlStateRequest: ExperienceEditor.Mode.CanSelectMode
HideInPreviewMode: true
PageCodeScriptFileName: /sitecore/shell/client/Sitecore/ExperienceEditor/Commands/Preview.js
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.
- In Windows Explorer, go to the directory that contains the commands JSes:
sitecore\shell\client\Sitecore\ExperienceEditor\Commands
- Copy the SelectMode.js and name it Preview.js.
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);
- 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.
In the Core database, just change the order of the item /sitecore/content/Applications/WebEdit/Menus/Other Views/Preview.
-
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