Plug-in commands

Add commands to toolbars, menus, and custom widgets in Optimizely CMS by using the command pattern, global registry, and widget mixins.

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

Updated 17 days ago