Plug-in areas

3 min

Optimizely has a flexible user interface for adding components.

Partner developers extend the Optimizely user interface with plug-in areas at common extension points. Each plug-in area has an AMD (Asynchronous Module Definition) module that can be required during initialization 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

Add command prototypes to the plug-in area during module initialization. Require the plug-in area AMD module and add the command prototype through the add method. The following example adds 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 Commerce Connect, 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);
    }
  });
});