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.


using EPiServer.Shell.ViewComposition;

namespace AlloyTemplates.Business {
      //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:

    // Dojo
    // Dijit
  function (
    // Dojo
    // Dijit
  ) {
    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>\

      postMixInProperties: function () {
        this.getCurrentContent().then(function (context) {

      contextChanged: function (context, callerData) {

        // the context changed, probably because we navigated or published something

      _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