Customizing the Sitecore Content Administration User Interface

This is the beauty of the Sitecore content management system (CMS) and the reason why developers love it as well.  You can modify and customize anything you want, from the out-of-the-box web controls to the content administration environment’s “look and feel.”  Of course, customizations that one can perform in Sitecore are not just limited to the following examples, but they do highlight what some advanced developers come across when building custom tools such as importing data from external feeds.  Hitting a button on the UI is definitely much more user-friendly than running a command from the command line.  You can also use read-only data template fields to hold auditing data.

Sitecore is driven by three main databases: Master, Web, and Core.   The Master database is where all content resides.  The Web database is where all published content resides, assuming the CMS setup is a traditional one that uses publishing workflows and the “submission and approval” model.  The Core database is essentially the “Settings” database and includes customizations to the UI and is the place where you can tweak custom modules that have been installed.

The Sitecore Content Admin Ribbon

Untitled

(Click to enlarge)

The Ribbon is a combination of all the graphical, clickable elements that are at the top of the Content Editor.  By default, the Ribbon is defined in the Core database at this location:

 

For the most part, the Default Ribbon serves all purposes and provides all of the Sitecore functionalities that are required to get the job done.  If you wish to modify, it would be to add more clickable elements, rather than to remove.  Most of these Default functionalities can be hidden via Security Editor so there is no need to manually hide or remove them.

If you look at all of the “child” items of the Default Ribbon, you will see that they correspond to each of the tabs on the top.

Untitled

 (Click to enlarge)

Each of the Tabs reference a Strip.  A Strip is a collection of Buttons organized by Chunks.  All of the Strips reside here:

 

Each of the Strips have child items in the Content Editor.  These child items are the Chunks.  A Chunk is a group of buttons within the Strip.  All of the Chunks are located here:

 

The child items of the Chunks are the actual buttons that can be clicked.  So to summarize, here are all the parts of the Sitecore UI Ribbon.

Untitled

(Click to enlarge)

 

Red- Strip
Green – Chunk
Blue – Button

Creating A New Button

Creating a new button is very straightforward and is easiest to achieve by duplicating an existing one and then modifying the properties and actions.  You can choose from large or small buttons and even choose your own icon from the library of icons.  The most important field when defining a button is the “Click” field:

Untitled

 

This is where you define 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, it should be something like this:

 

The type is a custom class and the assembly that contains the class.  The custom class must inherit from the Sitecore Command class object.

 

This must be the format followed to create commands for buttons.  As an additional requirement, there also must be an overridden Execute method that accepts a context parameter of type CommandContext.  This parameter tells the command which current item is being edited – essential to the context item.

 

This method is where all the work is done, so please put all your logic in there.

 

With this context item, you can also add additional logic to 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.

 

These are the basics.  There is much more that can be achieved through more advanced modifications.  Now, go customize the heck out of Sitecore!

Leave a Reply