HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Create a component

This topic provides an example of 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
          {
          }
      }

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


What’s Next