Customize the Experience Editor ribbon
To customize the Experience Editor ribbon, you can use the PageCodeScriptFileName property. In this property, you can specify a path to a JavaScript file that executes when the tabs on the ribbon loads.
This topic outlines how to:
Assign a command to the button
To create and assign a command for the new button:
-
In the folder structure of your Sitecore installation, navigate to
\Website\sitecore\shell\client\Sitecore\ExperienceEditor\Commands
and create a JavaScript file, for example,helloworld.js
. -
Open the file and insert the relevant code. For example:
RequestResponseshelldefine(["sitecore"], function (Sitecore) { Sitecore.Commands.HelloWorld = { canExecute: function (context) { // Determines whether command is disabled or enabled. return true; }, execute: function (context) { alert("Hello world!"); } }; });
-
In Sitecore Rocks, right-click the new button item, click Task, and then Design Layout.
-
Double-click the rendering, for example, SmallButton, and in the Edit Rendering Properties dialog box, change the following values:
-
For the Click property, set the value to trigger:button:click.
-
For the Command property, enter the command object name defined in Sitecore.Commands namespace, for example HelloWorld.
-
In the PageCodeScriptFileName field, enter the path to your JavaScript file that you want the button to execute.
-
-
Click Close and open the Experience Editor to verify that your button appears in the ribbon.
Initiate a SPEAK JS pipeline from a command
You can assign a command in the Experience Editor that initiates a SPEAK JS pipeline, for example:
define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
Sitecore.Commands.Rename =
{
canExecute: function (context) {
…
},
execute: function (context) {
context.app.disableButtonClickEvents();
ExperienceEditor.PipelinesUtil.executePipeline(context.app.RenamePipeline, function () {
ExperienceEditor.PipelinesUtil.executeProcessors(Sitecore.Pipelines.RenameItem, context);
});
context.app.enableButtonClickEvents();
}
};
});
The Experience Editor pipelines are stored as items in the Core database under: /sitecore/client/Applications/ExperienceEditor
.
If you want to extend a pipeline, you need to add a processor item under the relevant pipeline and set the sort order property according to the SPEAK guidelines.
The SPEAK pipelines for ribbon buttons in the Experience Editor 8.0 and later versions are independent from the regular Sitecore pipelines, such as <uiDeleteItems>
, that are defined in the Sitecore.config
file. Therefore, make sure that your customizations of the commands are relevant for both the Content Editor and the Experience Editor.
Hide an existing tab on the ribbon
In the Experience Editor ribbon, to hide an existing tab, you must first create a JavaScript file that hides the tab and then assign the JavaScript file to the tab that you want to hide.
To hide existing buttons, you can use the security settings.
To hide an existing tab:
-
In the folder structure of your Sitecore installation, navigate to
\Website\sitecore\shell\client\Sitecore\ExperienceEditor\Commands
and create a JavaScript file that hides the tab when the file is executed. -
In Sitecore Rocks, navigate to the tab that you want to hide, click Task, and then click Design Layout.
-
In the design layout for the tab that you want to hide, in the Renderings and Place Holders section, double-click the Strip rendering.
-
In the Edit Rendering Properties dialog box, in the PageCodeScriptFileName field, enter the path to the JavaScript file.