Loading...

Last updated: Oct 27 2016

Area: Episerver CMS Applies to versions: 10 and higher
Other versions:

Plugging in commands

This topic describes how to plug in commands when working with widgets, toolbars and actions in the Episerver user interface.

How it works

The command pattern in Episerver encapsulates interface actions into reusable objects, which separates logic for executing an action from concrete widgets and objects into its own testable unit.

You can add commands to a command consumer with the command pattern and its consumer and provider architecture. For example:

  • You want to add a command that is not dependant on a specific model to operate on, such as a plug-in to the global toolbar to open a dialog.
  • You want to add a command that is dependant on a model for its state, such as a command that plugs into the CMS publishmenu and operates on the currently selected page.

The global command registry lets you plug in commands in the system without having a reference to a specific widget instance. The global command registry maps command providers against keys so you can add a command provider that can feed a consumer with command if the global key matches.

Plugging in a command

The following example shows how to create a command provider that adds the test command:

define([
    "dojo",
    "dojo/_base/declare",
    "epi/shell/command/_CommandProviderMixin",
    "samples/TestCommand"
], function (dojo, declare, _CommandProviderMixin, TestCommand) {

    return declare([_CommandProviderMixin], {

        constructor: function () {
            this.inherited(arguments);

            var testCommand = new TestCommand();
            this.add("commands", testCommand);
        }
    });
});

The following code shows the test command:

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: "", //Define your own icon css class here.
        canExecute: true,

        _execute: function () {
            alert("Name: " + this.model.contentData.name);
        },

        _onModelChange: function () {
            //Here you can update canExecute depending on the model settings if your command is depending on the model state.
            console.log("New name: " + this.model.contentData.name);
        }
    });
});

This example shows how to plug into the publishmenu of Episerver CMS. Add the following code to your module initialzation. 

    var commandregistry = dependency.resolve("epi.globalcommandregistry");
    commandregistry.registerProvider("epi.cms.publishmenu", new MyCommandProvider());

Adding custom plug-in capabilities 

Add the extension functionality for your own widgets with the epi/shell/command/_WidgetCommandConsumerMixin mixin. Define the property commandKey: to a unique key such as samples.mywidgetkey. Third-party extensions use the key to plug into your menu.

define("samples.Toolbar", [
// Dojo
"dojo/_base/array",
"dojo/_base/lang",
"dojo/_base/declare",
"dojo/_base/lang",

// Dijit
"dijit/_Widget,
"dijit/_Container",
"dijit/form/Button",

// EPi CMS
"epi/shell/command/_WidgetCommandConsumerMixin"
],

function (
// Dojo
    array
    lang,
    declare,
    lang,

// Dijit
    _Widget,
    _Container,
    Button,

    _WidgetCommandConsumerMixin){
        return declare("samples.Toolbar", [_Widget, _Container, _WidgetCommandConsumerMixin], {
                //Get commands that has been registered to the global toolbar
                commandKey: "epi.cms.globalToolbar",

                onCommandsChanged: function (name, removed, added) {

                    //Add a button for each command
                    array.forEach(added, lang.hitch(this, function (command) {
                        //Create a button and bind onClick to command.execute
                        this.addChild(new Button({
                            label: command.label,
                            onClick: function() {
                                command.execute();
                            }
                        }));
                    }));

                    array.forEach(removed, function (command) {
                        //Remove the commands
                    });
                }
            });
});

Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/