Loading...
Area: Episerver CMS
Applies to versions: 10.1 and higher

Plug-in areas

Recommendations [hide]

Episerver has a flexible user interface where you can easily add your own components. This topic provides an introduction to the common plug-in areas in the user interface.

How it works

To enable partner developers to easily extend the Episerver user interface, plug-in areas have been added 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 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. It is important that 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.

Adding a command to a plug-in area

It is recommended that you 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 Episerver CMS, this is the page tree and in Episerver 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

Below there is an example of adding 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);
        }
    });
});
Do you find this information helpful? Please log in to provide feedback.

Last updated: Nov 14, 2016

Recommendations [hide]