Customizing Page Editor Ribbon in Sitecore : Part 2

In my previous post I’ve given introduction about Customizing Sitecore Page Editor Ribbon. In this post; I’ll explain step by step how to customize Sitecore Page Editor Ribbon. The definition for the Sitecore Page Editor Ribbon is located in the Core database. The path is /Sitecore/Content/Applications/WebEdit/Ribbons/WebEdit.

1. Create a new strip item Page Fields by using template /sitecore/templates/System/Ribbon/Strip under /Sitecore/Content/Applications/WebEdit/Ribbons/WebEdit path. Update Header field to specify strip 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 strip. Type a char in Access Key and you can access your strip by pressing [alt] + [Access key]. In below example you can access strip by pressing alt+p.
   
2. Create a new chunk item Hidden Fields by using template /sitecore/templates/System/Ribbon/Chunk  under /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Page Fields path. Update Header field to specify chunk 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 chunk. Type a char in Access Key.
   
3. Create a new large button item Edit Menu Options 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:
   
4. Now the main task is triggering click command on Edit Menu Options button click and load the field editor by specifying a parameterized command in the Click field. There are two ways of configuring click event:
   • Use predefined webedit:fieldeditor command
   • Writing custom code for click command
5. In this blog post; I’ll be explaining first approach by implementing Edit Menu Options button. How to write custom code for click command will be explained in next blog post by implementing Edit Meta Data button.
6. We don’t have to write a single line of code by using predefined webedit:fieldeditor command. This command is built-in Field Editor command which is invoked by Field Editor Button based buttons. You can see definition of this command in App_Config/Commands.config file.

   <command name="webedit:fieldeditor" type="Sitecore.Shell.Applications.WebEdit.Commands.FieldEditor, Sitecore.Client"/>

7. Write below line in Click field of Edit Menu Options (Large Button):

   webedit:fieldeditor(fields=Menu Title|Show Item In Menu|Show Children In Menu|Show Item In Secondary Menu, command={20D9CC76-A946-4613-87D4-7520DEF2CB07})

   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 Menu Options (Large Button) along with command parameter.
   
   
8. Browse the page in edit mode and you will see new customized button in ribbon.
   

Comments and suggestions are most welcome. Happy coding!