Tarek Nasser

We need to do three things:

• Create the code to execute when the ribbon button is clicked
• Configure Sitecore to connect the button to the code
• Create the button in the ribbon

Create the code to execute when the ribbon button is clicked

Let’s start with setting up the code, we need to create the command class and method to execute the command. I prefer to create a separate project for commands and other custom functions but for the sake of this example let’s create a folder under the [Website] directory and call it [Helpers] then create the class there and call it [DisplayInfo].

[\Website\Helpers\DisplayInfo.cs]

The following code displays a message box with the item name:

using System;
using Sitecore.Shell.Framework.Commands;

namespace Website1.Helpers
{
    [Serializable]
    public class DisplayInfo : Command
    {
        public override void Execute(CommandContext context)
        {
            // get the selected item
            var item = context.Items[0];

            // display message box with the item's name
            Sitecore.Context.ClientPage.ClientResponse.Alert("Item Name: " + item.Name);
        }
    }
}

Build the project.

Configure Sitecore to connect the button to the code

To configure Sitecore we have to modify the [web.config] file. We’ll do that by creating a new config file in [\Website\App_Config\Include\Commads.config] you can call it anything you want, I’ll use Commands.config.

The following XML adds the command to the main [web.config] file.  The [name] is the text we will use later when we create the button, it is the key that will link the button the code, I used the format [site name : command name], my website is called [Website1] so [Website1:DisplayInfo]

The [type] lists the namespace, class and the dll where the class is located. From the code above, the namespace and class is [Website1.Helpers.DisplayInfo] and the dll is the project’s dll, Website1.dll

Create the button in the ribbon 

Now let’s create the button in the ribbon, we’ll place it in the [Home] strip in its own chunk (group).

Let’s begin by logging into the desktop and switching to the [Core] database:

Open the content editor and navigate to [/sitecore/content/Applications/Content Editor/Ribbons/Chunks]

Here we will add a new chunk and call it [Item Info]:

• Right click on [Chunks] and select insert from template
• In the dialog, navigate to and select [/System/Ribbon/Chunk]
• Call it: Item Info
• Create the item

Insert “Item Info” in the  [Header] field and save.

Now we’ll create a [Large Button] in the chunk, right click then select insert from template and navigate to [/System/Ribbon/Large Button] and call it: Display Info

Insert “Display Info” in the [Header] field and save.

Pick an icon, I chose [Applications/32x32/about.png]

In the [Click] field insert the [name] we used in the [Commads.config] file which was [Website1:DisplayInfo] and save the changes.

So far we have created the button and the chunk (group) that contains the button, the last step is to add it to the [Home] strip.

Navigate to
[/sitecore/content/Applications/Content Editor/Ribbons/Strips/Home]

Right click and select insert from template then navigate to and select [/System/Reference] and call it: Item Info

In the [Reference] field select [/sitecore/content/Applications/Content Editor/Ribbons/Chunks/Item Info] and save.

Close the content editor and open it again and you should see the button in the ribbon in the [Home] strip.

Done

In summary

• Add the class and the code to execute to your project
• Add the Commands.config file and populate the name and type according to your class, namespace and dll
• Login to Sitecore desktop and switch to the core database
• Add the chuck
• Add the button to the chunk
• Add a reference to the chunk in the strip
• Build and reload the site