Loading...

Last updated: Nov 02 2018

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

Creating a component

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 have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/