Creating a Component

Introduction

The following example shows how to create a component that plugs in to the assets panel of the CMS home view:

CopyC#

using EPiServer.Shell.ViewComposition;
using EPiServer.Shell.Web;

namespace CodeSamples
{
    [Component(
        //Auto-plugs in the component to the assets panel of cms (See EPiServer.Cms.Shell.PlugInArea
        //in the EPiServer.Cms.Shell.UI assembly for 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:

CopyJavaScript

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
) {
    //We declare the namespace of our widget and add the mixins we want to use.
    //Note: Declaring the name of the widget is removed in Dojo 1.8 
    //but the release version of EPiServer 7 uses Dojo 1.7 and still needs this.
    return declare("alloy.components.CustomComponent",
        [_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>',

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

            // the context changed, probably because we navigated or published something
            html.set(this.contentName, context.name);
        }
    });
});