Create a component for the assets pane
Shows how to create a component that plugs in to the assets pane of the Optimizely Content Management System (CMS) edit view.
The component 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 {}
}
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 the Optimizely 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 blog posts
Updated 6 months ago