Plug-in commands

4 min

The command pattern in Optimizely Content Management System (CMS) encapsulates interface actions into reusable objects, which separates logic for executing an action from concrete widgets and objects into its testable unit.

With the command pattern and its consumer and provider architecture, you can add commands to a command consumer. For example:

You want to add a command not dependent 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 dependent 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 commands into 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 a command if the global key matches.

Plug in a command

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

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 CMS. Add the following code to your module initialization.

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

Add custom plug-in capabilities

Add the extension functionality for your 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
        });
      }
    });
  }
);