HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Create a component for the assets pane

Shows how to create a component that plugs in to the assets pane of the Optimizely Content Management System (CMS) edit view.

The component monitors the current page context and displays its name.

Example

using EPiServer.Shell.ViewComposition;

namespace AlloyTemplates.Business {
  [
    Component(
      //Auto-plugs in the component to the assets panel of cms (See EPiServer.Shell.PlugInArea
      //in the EPiServer.UI assembly for Dashboard and CMS constants)
      PlugInAreas = "/episerver/cms/assets",
      Categories = "cms",
      WidgetType = "alloy/components/CustomComponent",
      //Define language path to translate Title/Description.
      //LanguagePath = "/customtranslations/components/customcomponent";
      Title = "My custom component",
      Description = "A custom component that shows information about the current content item."
    )
  ]
  public class CustomComponent {}
}

The following is the corresponding JavaScript widget:

define([
    // Dojo
    "dojo/_base/declare",
    "dojo/html",
    // Dijit
    "dijit/_TemplatedMixin",
    "dijit/_WidgetBase",
    //CMS
    "epi-cms/_ContentContextMixin"
  ],
  function (
    // Dojo
    declare,
    html,
    // Dijit
    _TemplatedMixin,
    _WidgetBase,
    //CMS
    _ContentContextMixin
  ) {
    return declare([_WidgetBase, _TemplatedMixin, _ContentContextMixin], {
      // summary: A simple widget that listens to changes to the
      // current content item and puts the name in a div.

      templateString: '<div>\
                        <div data-dojo-attach-point="contentName"></div>\
                       </div>',

      postMixInProperties: function () {
        this.getCurrentContent().then(function (context) {
          this._updateUI(context);
        }.bind(this));
      },

      contextChanged: function (context, callerData) {
        this.inherited(arguments);

        // the context changed, probably because we navigated or published something
        this._updateUI(context);
      },

      _updateUI: function (context) {
        html.set(this.contentName, context.name);
      }
    });
  }
);

You can find a working example on the Optimizely GitHub. Just clone the repository, check out doc/how-to-create-a-component branch and run the site to see this component in action.

Related blog posts