Custom Ribbon button

 https://community.sitecore.com/community?id=community_blog&sys_id=71e267211bc370d0b8954371b24bcbdb

I am going to use my pet project called MiniBizz, an ecommerce website for selling everything related to remote controlled cars for professional racing.

First I need to create the needed Sitecore items:

1. Open the desktop and switch to the core database which is where all Sitecore configuration is located. To switch to the core database you just need to click in the bottom right of the Desktop on the database icon and choose “core”
2. Open the content editor and locate /sitecore/content/Applications/Content Editor/Ribbons/Chunks. This is where all the Chunks are stored (like the Operations chunk under the Home tab). Here you can create your Buttons under an existing Chunk or create your own Chunk. I have created my own called MiniBizz. The Chunk item needs to be based on the /sitecore/templates/System/Ribbon/Chunk template.
3. Now I can create buttons in my MiniBizz Chunk. Buttons can be created using different templates under /sitecore/templates/System/Ribbon/. I am using the Large Button template in this blog post. Do remember to fill out the Header and choose an icon. We will get back to the Click field ;)
4. Ones the Chunk and Button(s) has been created I can now associate it with the tab I want it to appear in. Locate /sitecore/content/Applications/Content Editor/Ribbons/Strips where all the tabs are configured. Find the tab you want to add your Chunk to, in my case I have chosen the Home tab (Strip). Add a reference based on the /sitecore/templates/System/Reference template and update the reference field to point to your newly created Chunk.

Now my MiniBizz Chunk shows up under the home tab.

Quick summary in pictures:

In Core DB

 

navigate to the Chunks area: /sitecore/content/Applications/Content Editor/Ribbons/Chunks

Add your own Chunk item with needed buttons

Finally associate your new Chunk with a Tab (Strip): /sitecore/content/Applications/Content Editor/Ribbons/Strips

Now the code:

Of course none of the buttons do anything when I click them. Now is the time to fix that.

First I am going to create a class in VS. The class needs to inherit from Sitecore.Shell.Framework.Commands.Command and I need to override the Execute method.

My test class looks like this:

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

namespace Sc.Int.MiniBizz.Customaztion
class MBCustomButtonImport : Command
{
public override void Execute (CommandContext context)
{
Sitecore.Context.ClientPage.ClientResponse.Alert("Testing my button");
}
}
}

The alert is just as useful as the alert in JS to test if the code is running at all ;)

The CommandContext gives me access to the currently chosen item in the content tree among other things.

Associating the code with my button

Now I just have to reference my code on my button

1. Locate the commands.config in the [your_website_root]/App_Config/Commands.config. In this file, all click events for buttons are located
2. Copy/Paste one of the existing <command> elements and change the following: Name = your name for your clickevent. I have used minibizz:import, Type = namespace.class, assembly name
3. Locate your created button item in the core database as previously described and add the name of your command (in my case minibizz:import) to the Click field.