Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

Optimizely developer documentation

How can we help you?

Try our conversational search powered by Generative AI!

AI OnAI Off

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


Did this page help you?