Global toolbar commands plug-in
Describes how to add commands to the global toolbar.
You can create a command plugin for the global toolbar in the Optimizely Content Management System (CMS) user interface. To add commands to the global toolbar, create a Command Provider for the toolbar and add it to the global command registry. The global command registry maps command providers against keys.
Create a command provider for the global toolbar
The following example shows how to create a provider that adds three commands to the areas inside the global toolbar.
//alloy/MyGlobalToolbarProvider
define([
"dojo/_base/declare",
"dijit/form/Button",
"dijit/form/ToggleButton",
"epi-cms/component/command/_GlobalToolbarCommandProvider",
"alloy/TestCommand",
"alloy/MyToggleCommand"
],
function (declare, Button, ToggleButton, _GlobalToolbarCommandProvider, TestCommand, MyToggleCommand)
{
return declare([_GlobalToolbarCommandProvider],
{
constructor: function ()
{
this.inherited(arguments);
// The Global Toolbar has three areas that you can add commands to ["leading", "center", "trailing"]
// the _GlobalToolbarCommandProvider extends the _CommandProviderMixin with helper methods for easy adding
// of commands to the different areas
//Create dijit/Form/Button in the leading area and bind the TestCommand to it
this.addToLeading(new TestCommand(
{label:"First command"}),
{showLabel:true, widget:Button});
//Create dijit/Form/ToggleButton in the center area and bind the TestCommand to it
this.addToCenter(new MyToggleCommand(
{label:"Second command"}),
{showLabel:true, widget:ToggleButton});
//Create dijit/Form/Button in the trailing area and bind the TestCommand to it
this.addToTrailing(new TestCommand(
{label:"Third command"}),
{showLabel:true, widget:Button});
}
});
}
);
The following code shows the test commands:
//alloy/TestCommand.js
define([
"dojo/_base/declare",
"epi/shell/command/_Command"
],
function (declare, _Command)
{
return declare([_Command],
{
name : "Test",
label : "Test command",
tooltip : "Click to execute me",
iconClass : "dijitIconNewPage", //Define your own icon css class here.
canExecute : true,
_execute : function ()
{
alert("label : " + this.label);
}
});
}
);
//alloy/MyToggleCommand.js
define([
"dojo/_base/declare",
"epi/shell/command/ToggleCommand"
],
function (declare, ToggleCommand)
{
return declare([ToggleCommand],
{
name : "Test",
label : "Click here to toggle",
tooltip : "Click to toggle me",
iconClass : "dijitIconNewPage", //Define your own icon css class here.
canExecute : true,
_execute : function ()
{
alert("Label : " + this.label);
}
});
}
);
For the system to find your command provider, you must register it in the global command registry:
var commandregistry = dependency.resolve("epi.globalcommandregistry");
//The first parameter is the "area" that your provider should add commands to
//For the global toolbar the area is "epi.cms.globalToolbar"
//You need to register your custom global toolbar provider that we created before using that area
commandregistry.registerProvider("epi.cms.globalToolbar", new MyGlobalToolbarProvider());
To initialize your command provider, see Adding a module initializer. See the example of an initializer at episerver/alloy-mvc-template.
You can find a working example of all described components on our Alloy MVC on GitHub.
Clone the repository, check out branch doc/global-toolbar-provider and run the site. You will see the new commands added in the global toolbar.
Updated about 1 month ago