---
title: Plug-in commands
slug: cms-11/dev-docs/plugging-in-commands
docTags: 
createdAt: 2026-07-22T19:45:18.312Z
---

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`:

```csharp
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:

```csharp
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.

```csharp
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.

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