Customizing Page Editor Ribbon in Sitecore : Part 3

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.

1. 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:
   
2. 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&lt;FieldDescriptor&gt; {
           /// 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;
           }
       }
   
   }

3. 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).
4. 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.
   
   
5. Browse the page in edit mode and you will see new customized button in ribbon.
   

Comments and suggestions are most welcome. Happy coding!