Plug-in areas

9 min

Optimizely Content Management System (CMS) has a flexible user interface where you can add components.

CMS added plug-in areas at common extension points to let partner developers extend the CMS user interface. You can require an Asynchronous Module Definition (AMD) module for each plug-in area during initialization, at which time you can add custom commands to the plug-in area.

The plug-in areas only accept command prototypes; see the documentation on the command patterncommand pattern for information on creating a command.

Add a command to a plug-in area

You should add command prototypes to the plug-in area during module initializationduring module initialization. Require the plug-in area AMD module and add the command prototype with the add method. Here is an example of adding the reload children command to the navigation tree:

define([
    'dojo/_base/declare',
    'epi-cms/plugin-area/navigation-tree',
    // Parent class
    'epi/_Module',
    // Commands
    'addon/commands/ReloadChildren'
  ],
  function (
    declare,
    navigationTreePluginArea,
    // Parent class
    _Module,
    // Commands
    ReloadChildren
  ) {
    return declare([_Module], {
      initialize: function () {
        this.inherited(arguments);
        navigationTreePluginArea.add(ReloadChildren);
      }
    });
  }
);

Available plug-in areas

The following is a list of the available plug-in areas, a description of where the area displays, the AMD module ID, and an example of the model the registered commands will receive.

This is used for plugging into the context menu and component menu of the navigation tree. In CMS, this is the page tree, and in Optimizely Customized Commerce, this is the catalog tree.

Module ID

epi-cms/plugin-area/navigation-tree

Project overview

The project-overview plugs into the project overview's main menu and project items menu.

Module ID

epi-cms/plugin-area/project-overview

Assets pane

The assets-pane plugs into the context menu of the assets panel.

Module ID

epi-cms/plugin-area/assets-pane

Edit notifications

The edit-notifications plugs into edit notifications.

Module ID

epi-cms/plugin-area/edit-notifications

The following example shows how to add commands to plug-in areas:

define([
  "dojo",
  "dojo/_base/declare",
  "dojo/Stateful",

  "epi/_Module",

  "epi/shell/command/_Command",

  "epi-cms/plugin-area/navigation-tree",
  "epi-cms/plugin-area/project-overview",
  "epi-cms/plugin-area/assets-pane",
  "epi-cms/plugin-area/edit-notifications"
], function (
  dojo,
  declare,
  Stateful,

  _Module,

  _Command,

  navigationTreePluginArea,
  projectPluginArea,
  assetsPanePluginArea,
  editNotificationPluginArea
) {
  // Command used on navigation tree context menu
  var NavigationTreeCommand = declare([_Command], {
    label: "Navigation tree command",

    _onModelChange: function () {
      this.set("canExecute", true);
      this.set("isAvailable", true);
    },

    _execute: function () {
      alert("Navigation tree command");
    }
  });

  // Command used on project items context menu
  var ProjectItemCommand = declare([_Command], {
    category: "menuWithSeparator",

    label: "Project item command",

    canExecute: true,
    isAvailable: true,

    _execute: function () {
      alert("PRoject item command");
    }
  });

  // Command used on projects main menu
  var ProjectCommand = declare([_Command], {
    category: "publishmenu",

    label: "Project command",

    canExecute: true,
    isAvailable: true,

    _execute: function () {
      alert("Project command");
    }
  });

  // Command used on assets pane items context menu
  var AssetsCommand = declare([_Command], {
    label: "Assets command",

    _onModelChange: function () {
      this.set("canExecute", true);
      this.set("isAvailable", true);
    },

    _execute: function () {
      alert("Assets command");
    }
  });

  // Notification displayed for Product pages
  var TestNotification = declare([Stateful], {
    order: 1000,

    _valueSetter: function (value) {
      if (value && value.contentData && value.contentData.contentTypeName === "Product") {
        this.set("notification", {
          content: "test"
        });
      } else {
        this.set("notification", {
          content: null
        });
      }
    }
  });

  return declare([_Module], {
    initialize: function () {
      this.inherited(arguments);

      // adding command to navigation tree plugin area
      navigationTreePluginArea.add(NavigationTreeCommand);

      // adding command to project plugin area
      projectPluginArea.add(ProjectItemCommand);
      projectPluginArea.add(ProjectCommand);

      // adding command to assets pane plugin area
      assetsPanePluginArea.add(AssetsCommand);

      // adding notification to notification plugin area
      editNotificationPluginArea.add(TestNotification);
    }
  });
});