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 12 months ago

Plugging in commands