Contextual Ribbons

In the Core database you can find the contextual ribbons item under /sitecore/content/Applications/Content Editor/Ribbons/Contextual Ribbons. The way I first understood it was that those ribbons will be based on some different template. Well, they don’t.

We can create a toolbar based on the /sitecore/templates/System/Ribbon/Toolbar template, create a Strip underneath (/sitecore/templates/System/Ribbon/Strip), create a Chunk underneath that (/sitecore/templates/System/Ribbon/Chunk) and finally a button (in my example a large button: /sitecore/templates/System/Ribbon/Large Button).

Let’s see how the ‘Images’ contextual ribbon works:
Image

This corresponds to the active menu below, when an image is selected in the media library:
Image

Note that because the Header field of the Image chunk is set to Media, both the strip and the chunk are called Media. These values will be taken from the Header field, not the name.

And this is selected in the Jpeg template (/sitecore/templates/System/Media/Unversioned/Jpeg), in the Ribbon field (in the Appearance section) :
Image

To create your own contextual ribbon, you can do the following:

Create a toolbar, strip, chunk and button:

Image

Toolbar only has the field ‘Sticky Chunk’. This seems to always be the first chunk in the tab – in this case the Save button in the Write chunk.
Image

In both the Strip item and Chunk item I’ve just put in the Header field (TestStrip and TestChunk in my case), and an ID identical to the Header.

For the Button I’ve copied the Click event and the icon from the View button of the Images ribbon, and set the header and ID to TestButton.

Now we can go into the Master database and go to the Standard Values of the template we want to add the contextual ribbon on. We can now either go to the Configure tab and select ‘Contextual Tab’ in the Appearance chunk, or go to the Ribbon field in the Appearance section.

This will give the following output:
Image

Of course we can create our own click event as well. All we need to do is define the command in the Commands.config file. For instance: <command name=”test:example” type=”Your.Example.Class, Your.Assembly” />

The class does need to inherit from Sitecore.Shell.Framework.Commands.Command, and implement the Execute method.

After this we can put the value of the click field to test:example

As always, comments and improvements are very welcome!

Advertisements