HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Creating a component for the assets pane

This topic provides an example of how to create a component that plugs in to the assets pane of the CMS edit view in Optimizely.

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
          {
          }
      }

And 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 our 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


Did this page help you?