Plug-in commands

4 min

The command pattern in Optimizely Content Management System (CMS) encapsulates interface actions into reusable objects. This separates execution logic from concrete widgets into a testable unit.

The consumer and provider architecture lets you add commands to a command consumer. The following examples illustrate two common scenarios:

Add a command that does not depend on a model, such as a global toolbar plug-in that opens a dialog.

Add a command that depends on a model for its state, such as a command that plugs into the CMS publishmenu and operates on the selected page.

The global command registry maps command providers against keys. This lets you plug in commands without a reference to a specific widget instance.

Plug in a command

The following example creates 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 () {
        //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);
      }
    });
  }
);

The following example plugs into the publishmenu of CMS. Add this code to a module initializer:

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

Add custom plug-in capabilities

Extend your widgets with plug-in support using the epi/shell/command/_WidgetCommandConsumerMixin mixin. Set the commandKey property to a unique key, such as samples.mywidgetkey. Third-party extensions use this key to plug into the widget menu.

The following example defines a toolbar widget that consumes commands from the global toolbar registry:

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