Loading...
Area: Episerver CMS
Applies to versions: 10 and higher
Other versions:

Creating a component

Recommendations [hide]

This topic provides an example of how to create a component that plugs in to the assets pane of the CMS edit view in Episerver. The component simply 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 topics

Blog posts

Do you find this information helpful? Please log in to provide feedback.

Last updated: Nov 02, 2018

Recommendations [hide]