Movatterモバイル変換


[0]ホーム

URL:


Dev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog InContent Management System
Dev Guide
All
Pages
Start typing to search…

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(// Dojodeclare,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 somethingthis._updateUI(context);},_updateUI: function(context) {html.set(this.contentName, context.name);}});});

You can find a working example onGitHub. Just clone the repository, check out thedoc/how-to-create-a-component branch, and run the site to see this component in action.

Related blog posts

Updated 10 days ago



[8]ページ先頭

©2009-2025 Movatter.jp