Plug-in areas

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