Create a component

Build a custom component that monitors page context and displays content item names in the CMS 13 assets pane.

Extend the editing UI with custom components that react to the editor's context. This example creates a component that monitors the current page context and displays the content item name in the assets pane.

Define the server-side component class with the Component attribute:

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 {}
}

Define 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], {

			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);

				this._updateUI(context);
			},

			_updateUI: function(context) {
				html.set(this.contentName, context.name);
			}
		});
	}
);

A working example is available on GitHub. Clone the repository, check out the doc/how-to-create-a-component branch, and run the site to see the component in action.

Related blog posts