Sitecore UI Ribbons and Buttons

This is the beauty of Sitecore.  You can modify and customize anything you want, from the built-in controls to the UI environment.  If you have ever wondered how you can modify the ribbon on top, here it is.

The ribbon configurations and settings reside on the core database.

First, let’s understand all the parts of a Sitecore UI ribbon.  The group of all the buttons along with the tabbed menu on the top of the UI makes a ribbon.

There is currently a default Ribbon set up here:

/sitecore/content/Applications/Content Editor/Ribbons/Ribbons

If you look at all the child items here, you will see they correspond to each of the tabs on the top.

Each of the tabs reference a strip.  A strip is a tab which contains sets of buttons.  If you check out each of the referenced strips, they all reside here:

/sitecore/content/Applications/Content Editor/Ribbons/Strips

Each of the strips have child items.  These child items are called chunks.  They are the set of buttons that appear when the tab is highlighted.  All chunks are located here:

/sitecore/content/Applications/Content Editor/Ribbons/Chunks

The child items of the chunks are the actual buttons.

  

Creating a button is very straightforward and is easiest to duplicate an existing one and then modifying it.  You can choose from large or small buttons and even choose your own icon.  The most important field in this template is the "Click" field.  This is where you set the Sitecore command that gets fired when the button is clicked.  This command must be equivalent to a command that is stored in the commands.config file. For example:

<command name="contenteditor:DoCoolStuff" type="Namespace.ProjectAssembly.Commands.DoCoolStuff,Christies.Sitecore" />

The type is a custom class and the assembly that contains the class.  The custom class inherits from the Sitecore Command class object and this must be the format followed to create commands for buttons.  Basically, there must be an overridden Execute method that accepts a context parameter.  This parameter input tells the command what the current item is in the content editor that is being edited.  This method is where all the work is done so please put all your logic in here.  With this context item, you can determine which strips and/or chunks to hide/show.  The QueryState method does exactly that.  If the button is always visible then you do not need this method.