Last updated: Mar 09 2017

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.

Example

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

namespace CodeSamples
{
    [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>',

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

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

Comments

I think the widget type format here is incorrect. I belive the Widgettype should be specificed as a path, i.e in the example above it should be

WidgetType = alloy/components/CustomComponent

This is the behaviour I see on version 10.3.2

@Mark Thank you for pointing that out. It was a breaking change we did in CMS UI 10.0.0 and somehow this example got missed when updating them all. It's updated now.

More info on the breaking change: Breaking changes in CMS 10 (see "Remove support for legacy dot notation for dojo modules")

Now that the Gadget framework is deprecated I have been trying to create a component for the Dashboar using the code from this blog http://world.episerver.com/blogs/grzegorz-wiechec/dates/2017/1/the-old-gadget-framework-is-deprecated/. 

I got the sample component up on the dashboard, but it is not available in the "Add gadget" menu. Also there is no cms category in this menu (only "All" and "Dashboard"). Once I remove the sample component from the dashboard (by selecting "remove gadget") there is no way to get it back.

How do i get the component to show up in the "Add gadget" menu

This flat out does not work for me. I am unable to even get a functionless static widget to show up in the assets pane following the exact instructions above with my dojo path. Has anybody been successful with this? CMS 11.2.1.0 (32 bit process) but I'm running 64 bit IISExpress.

I consistently have been getting errors "Cannot read property 'tagName' of undefined" and "Cannot read property 'appendChild' of null" from widgets.js

@PeterArsenyev we have tested this and it works as described. Make sure you have put the files in the "ClientResources/Scripts/" folder or change in the module.config

Hope this will solve it for you