Create a component
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.
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 GitHub. Just clone the repository, check out the doc/how-to-create-a-component branch, and run the site to see this component in action.
Related blog posts
Updated 11 months ago