Plug-in areas
Describes common plug-in areas in the user interface.
Optimizely Content Management System (CMS) has a flexible user interface where you can easily add your own components.
To enable partner developers to easily extend the CMS user interface, plug-in areas have been added at common extension points. There is an Asynchronous Module Definition (AMD) module for each plug-in area that can be required during initialization; at which time it is possible to add custom commands to the plug-in area.
The plug-in areas only accept command prototypes; see the documentation on the command pattern for more information on how to create a command. You should only command prototypes are added to the plug-in area since they will be constructed at runtime. 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. 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 plug-in area appears, 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 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
Used for plugging into the main menu and project items menu of the project overview.
Module id
epi-cms/plugin-area/project-overview
Assets pane
Used for plugging into the context menu of assets pane.
Module id
epi-cms/plugin-area/assets-pane
Edit notifications
Used for plugging edit notifications.
Module id
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);
}
});
});
Updated about 1 month ago