Global toolbar commands plug-in

Introduction

This document describes how to create a command plugin for the global toolbar in the EPiServer user interface. To be able to add commands to the global toolbar, a Command Provider for the toolbar has to be created and added to the global command registry. The global command registry is used to map command providers against given keys. 

Creating a command provider for the global toolbar

The following example shows how to create provider that adds three commands to the different areas inside the global toolbar.

//samples/MyGlobalToolbarProvider
define([
    "dojo/_base/declare",
    "dijit/form/Button",
    "dijit/form/ToggleButton",

    "epi-cms/component/command/_GlobalToolbarCommandProvider",
    "samples/TestCommand",
    "samples/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});
        }
    });
});

And here are the test commands

//samples/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);
        }
    });
});

//samples/MyToggleCommand.js
define([
    "dojo/_base/declare",
    "epi/shell/command/ToggleCommand"
],
function (declare, _Command) {
    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"
commandregistry.registerProvider("epi.cms.globalToolbar", new MyCommandProvider());