Hide menu Last updated: Mar 09 2017
Area: Episerver CMS Applies to versions: 10 and higher
Other versions:

Creating a component example

The following example shows how to create a component that plugs in to the assets pane of the CMS edit view.

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