Plug-in areas

Optimizely has a flexible user interface where you can easily add your components.

Partner developers can extend the Optimizely user interface with added plug-in areas at common extension points. There is an AMD (Asynchronous Module Definition) module for each plug-in area that can be required during initialization; at which time you can to add custom commands to the plug-in area.

The plug-in areas only accept command prototypes because they are constructed at runtime. See command pattern. When constructed, they are set with a model specific to the plug-in area.

Add a command to a plug-in area

You should add your command prototypes to the plug-in area during module initialization. This is done by requiring the plug-in area AMD module and adding the command prototype via the add method. The following example shows 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 list describes the available plug-in areas, where they appear, the AMD module ID, and an example of the model that the registered commands will receive.

navigation-tree – Used for plugging into the context menu and component menu of the navigation tree. In Optimizely Content Management System (CMS), this is the page tree and in Optimizely Customized Commerce, this is the catalog tree.
epi-cms/plugin-area/navigation-tree
project-overview – Used for plugging into the main menu and project items menu of the project overview.
epi-cms/plugin-area/project-overview
assets-pane – Used for plugging into the context menu of the assets panel.
epi-cms/plugin-area/assets-pane
edit-notifications – Used for plugging edit notifications.
epi-cms/plugin-area/edit-notifications

The following example shows how to add command to all plugin 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);
    }
  });
});