How To Add A Custom Sitecore Button To The Editor Ribbon

A powerful selling point of Sitecore is the amount of customization that it provides to developers. A common requirement I’ve been faced with numerous times is providing content editors with some bespoke functionality that they can trigger themselves. Some examples of these types of scenarios are importing content from WordPress, exporting content into RSS feeds and refreshing data generated from a third party system.

When you get faced with these types of scenarios, a really cool and useful feature of Sitecore is to be able to create your own tab in the Sitecore ribbon with some custom buttons that trigger your custom code. In today’s tutorial, I’m going to cover the code required to achieve this and how you can configure Sitecore to use it.

Creating A Custom Sitecore Strip In The Ribbon

Everyone who has used Sitecore for more than 5 minutes will be aware of the top ribbon:

sitecore_ribbon_1

At the very top you have a bunch of tabs, or, in Sitecore terms ‘strips’, like ‘Home’, ‘Navigate’, ‘Review’ etc..

The good news is creating a custom strip for yourself is very easy. First, you will need to switch to the ‘Core’ database and open the content editor. If you do not know how to do this, then I suggest you read, How To Switch Between The Core and Master Database in Sitecore.

With the Core database open, navigate to ‘Content’ -> ‘Applications’ -> ‘Content Editors’ -> ‘Ribbons’ -> ‘Strips’

sitecore_ribbon_2

My usual trick, if I’m not using TDS, is to right click on existing strip, select ‘Duplicate’ and fill the details to suit you, as seen below. Doing this will create a new strip in the header but it will be empty:

sitecore_ribbon_3

To fill your custom strip up, you will need to link to one or more ‘Chunks’. Chunks are the sub tabs you can find in the editor. If you already have a chunk you want to use, create a new reference item under your custom strip and point it to the chunk you want to use. When you create a new item you will need to use the Reference template, template location is shown below:

/sitecore/templates/System/Reference 

In the ‘Data’ -> ‘Reference’ field, you need to add a reference to the chunk you want to use, see below:

sitecore_ribbon_4

Creating A Custom Sitecore Chunk

Creating a custom chunk is very similar to the steps above for creating a strip. Chunks can be found in the Core databases, ‘Content’ -> ‘Applications’ -> ‘Content Editor’ -> ‘Ribbons’ -> ‘Chunks’ section.

To create a custom chunk, I usually just duplicate an existing one. You can create a new one by using the ‘/sitecore/templates/System/Ribbon/Chunk’ template. All you need to do is add in the ‘Header’ field with the name you want to display and you are set.

sitecore_ribbon_5

We are now slowly getting to a stage where we can do something useful! We have a custom strip with a custom chunk. The next step is to add a button to the chunk that will call our custom code.

Adding a Button To The Chunk

Adding a button is again very similar to the process above. To add buttons to a chunk, you simply need to create the buttons as child items under the chunk. To create a button, you can use any of the templates under Buttons can be created using different templates under ‘/sitecore/templates/System/Ribbon/’. I seem to go for the ‘/sitecore/templates/System/Ribbon/Large Button’ template.

sitecore_ribbon_5

To create a new button, the two main fields you need to supply is the name you want to appear by the button in the ‘header’ field and the code it should be called in the ‘Click’ field. In the example above, I’m calling something called ‘jondjones:customButton’. This isn’t related to a class or method, instead, it relates to the Sitecore command it will read in your ‘App_Config’ -> ”commands.config’ file.

sitecore_ribbon_7

In my example, I created a new command with a key called ‘jonjones:customButton’ for the type I point to my custom code. This is the namespace and class name, followed by a coma. then the assembly name, like so:

JonDJones.Core.Commands.DoCustomWork, JonDJones.Core

Writing The Custom Code

We’ve finally made it to the part where we need to write some code, eventually!

using System;
using Sitecore.Shell.Applications.Dialogs.ProgressBoxes;
using Sitecore.Shell.Framework.Commands;
public class DoSomeWork : Command
{
private static readonly object Monitor = new object();        
public override void Execute(CommandContext context)
{
if (context == null)
return;
try
{
ProgressBox.Execute("JOB NAME", "Title", "Applications/32x32/refresh.png", Refresh);
}
catch (Exception ex)
{
Sitecore.Diagnostics.Log.Error("Error!", ex, this);
}
}
public void Refresh(params object[] parameters)
{
// Do Stuff
}
}

The code is pretty simple. TO create a Sitecore command you will need to inherit from ‘Sitecore.Shell.Framework.Commands.Command’ and override, Execute(CommandContext context) method. In here you can put whatever custom code you like. In my simple example, I’ve added a ‘Sitecore.Shell.Applications.Dialogs.ProgressBoxes.ProgressBox’. This will show a basic progress bar while your custom code is executing. It is definitely not needed. If you are trying to implement some functionality like a data import that might take 10-60 seconds to run, then this is a good practice technique to use

Conclusion

in today’s tutorial we’ve covered quite a lot. We’ve gone through the steps to create a custom Sitecore strip, chunk and button. We’ve create a custom class that inherits from the Sitecore command class.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

1 reply

Trackbacks & Pingbacks

  1. […] logo in the Sitecore ribbon, with a link to their website. I’ve talked previously in, How To Add A Custom Sitecore Button To The Editor Ribbon about some of the possibilities to add bespoke code and buttons into the Sitecore ribbon. In this […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *