In my previous blog post; I’ve explained how to customize Sitecore Page Editor Ribbon by using predefined webedit:fieldeditor command. In this blog post I am going to discuss how to write custom code for click command.
- Create a new large button item Edit Meta Data by using template /sitecore/templates/System/Ribbon/Large Button under /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Page Fields/Hidden Fields path. Update Header field to specify button name and enter unique id with no white spaces in ID field. Tooltip is used to display a short description when a user points at the button. Type a char in Access Key and you can access your button by pressing [alt] + [Access key]. Content tree of core database should look like as below figure:
- Open visual studio and create a new class CustomFieldEditor and inherit Sitecore.Shell.Applications.WebEdit.Commands.FieldEditorCommand class. Write below code in class.
using Sitecore; using Sitecore.Data.Items; using Sitecore.Diagnostics; using Sitecore.Shell.Framework.Commands; using Sitecore.Web; using Sitecore.Web.UI.Sheer; using System; using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; using System.Web; namespace Sitecore.Ramblings { public class CustomFieldEditor : Sitecore.Shell.Applications.WebEdit.Commands.FieldEditorCommand { /// <summary> /// The name of the parameter in <c>ClientPipelineArgs</c> containing /// Sitecore item identification information. /// </summary> private const string URI = "uri"; public override void Execute(CommandContext context) { Assert.ArgumentNotNull(context, "context"); if (context.Items.Length >= 1) { ClientPipelineArgs args = new ClientPipelineArgs(context.Parameters); args.Parameters.Add("uri", context.Items[0].Uri.ToString()); if (args.Parameters["fields"] == String.Empty) { args.Parameters.Add("fields", context.Parameters["fields"]); } Context.ClientPage.Start(this, "StartFieldEditor", args); } } /// <summary> /// Gets the configured Field Editor options. Options determine both the look of Field Editor and the actual fields available for editing. /// </summary> /// <param name="args">The pipeline arguments. Current item URI is accessible as 'uri' parameter</param> /// <param name="form">The form values.</param> /// <returns>The options.</returns> /// <example> /// ItemUri uri = ItemUri.Parse(args.Parameters["uri"]); /// Item item = Database.GetItem(uri); /// var options = new PageEditFieldEditorOptions(form, new List<FieldDescriptor> { /// new FieldDescriptor(item, "Title"), /// }); /// options.Title = "Field Editor Test"; /// options.Text = "Tests the Mini Content Editor system"; /// options.Icon = "people/16x16/cubes_blue.png"; /// return options; /// </example> protected override Sitecore.Shell.Applications.WebEdit.PageEditFieldEditorOptions GetOptions(Sitecore.Web.UI.Sheer.ClientPipelineArgs args, NameValueCollection form) { Sitecore.Diagnostics.Assert.IsNotNull(args, "args"); Sitecore.Diagnostics.Assert.IsNotNull(form, "form"); Sitecore.Diagnostics.Assert.IsNotNullOrEmpty(args.Parameters[URI], URI); Sitecore.Data.ItemUri uri = Sitecore.Data.ItemUri.Parse(args.Parameters[URI]); Sitecore.Diagnostics.Assert.IsNotNull(uri, URI); Sitecore.Diagnostics.Assert.IsNotNullOrEmpty(args.Parameters["fields"], "Field Editor command expects 'fields' parameter"); Sitecore.Diagnostics.Assert.IsNotNullOrEmpty(args.Parameters["command"], "Field Editor command expects 'command' parameter"); string flds = args.Parameters["fields"]; string coreItemId = args.Parameters["command"]; Sitecore.Data.Items.Item item = Sitecore.Data.Database.GetItem(uri); Sitecore.Diagnostics.Assert.IsNotNull(item, "item"); Item coreItem = Client.CoreDatabase.GetItem(coreItemId); Assert.IsNotNull(coreItem, "command item"); List<Sitecore.Data.FieldDescriptor> fields = new List<Sitecore.Data.FieldDescriptor>(); foreach (string fieldName in flds.Split('|')) { if (item.Fields[fieldName] != null) { fields.Add(new Sitecore.Data.FieldDescriptor(item, item.Fields[fieldName].Name)); } } // Field editor options. Sitecore.Shell.Applications.WebEdit.PageEditFieldEditorOptions options = new Sitecore.Shell.Applications.WebEdit.PageEditFieldEditorOptions(form, fields); options.PreserveSections = false; options.DialogTitle = coreItem.Fields["Header"].Value; options.Icon = coreItem.Fields["Icon"].Value; options.Title = coreItem.Fields["Header"].Value; return options; } /// <summary> /// Determine if the command button should be displayed or hidden. /// </summary> public override CommandState QueryState(CommandContext context) { if (WebUtil.GetQueryString("mode") != "edit") { return CommandState.Hidden; } return CommandState.Enabled; } } }
- Define command definition in App_Config/Commands.config file as below:
<command name="cutomsitecore:customfieldeditorbutton" type="Sitecore.Ramblings.CustomFieldEditor, SitecoreRamblings"/>
Few important things here to note are:- Command name should be in lower case. For example: cutomsitecore:customfieldeditorbutton
- The type format is “<namespace>.<class name>, <assembly name>”. For example: Sitecore.Ramblings is namespace, CustomFieldEditor is class name and SitecoreRamblings is assembly name.
- This type is the link to the class which inherits the field editor command class (Sitecore.Shell.Applications.WebEdit.Commands.FieldEditorCommand).
- Write below line in Click field of Edit Meta Data (Large Button):
cutomsitecore:customfieldeditorbutton(fields=Browser Title|Meta Tag|Meta Description,command={5D7A9F2B-9EB5-429B-AA08-DC743A7189E0})
First argument fields is pretty much understandable. You have to specify field names that should be shown in the field editor separated with “|” (pipe symbol). You have to enter GUID of Edit Meta Data (Large Button) along with command parameter. - Browse the page in edit mode and you will see new customized button in ribbon.
0 comments :
Post a Comment