Global toolbar commands plug-in

Introduction

This document describes how to create a command plugin for the global toolbar in the EPiServer user interface.

Creating a command provider for the global toolbar

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. 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());