HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Plug in commands

Describes how to plug in commands when working with widgets, toolbars and actions in the Optimizely Content Management System (CMS) user interface.

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

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

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

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