In this article, Yoav Niran explained the basics of a SDL Tridion UI extension, like how to create a button in the Ribbon Toolbar. Now I will revisit that topic and explain you about the use of the Ribbon Item Group.
If you take a look at the SDL Tridion Ribbon Toolbar you see it is possible to have large and small buttons and you can group them. When you minimize the toolbar, all buttons will appear as small and sit next to each other. But on the regular (or large) sized ribbon toolbar, the small buttons can be fitted under each other, this way you can fit 3 buttons in the space of 2 large ones.
Now defining a button in the Ribbon toolbar is relatively easy once you get the hang of it, making it a small button is just specifying the following element inside your extension element in the configuration:
But that was where I came across the tricky part, when I specified 2 small buttons in the Ribbon toolbar, they appeared next to each other instead of under each other. Apparently they needed to be grouped together somehow.
I tried adding the buttons in their own group by specifying a unique groupid, but that just separated them in their own group and they still appeared next to each other. So I checked with one of the developers and they explained me I should use a RibbonItemGroup. This allows you to group certain items inside a group. The RibbonItemGroup is not something you can define in the Configuration file of your UI extension, it is a Tridion User Control (.ascx) that you need to specify.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ViewItemsGroup.ascx.cs" Inherits="SDL.Examples.UI.Controls.ViewItemsGroup" %> <%@ Import Namespace="Tridion.Web.UI" %> <c:RibbonItemsGroup runat="server" ID="RibbonItemsGroup"> <c:RibbonButton runat="server" CommandName="ViewStaging" Title="View in Staging" Label="View In Staging" IsSmallButton="true" ID="ViewStagingBtn" /> <c:RibbonButton runat="server" CommandName="ViewLive" Title="View in Live" Label="View in Live" IsSmallButton="true" ID="ViewLiveBtn" /> </c:RibbonItemsGroup>
The code behind file extends a Tridion.Web.UI.Controls.TridionUserControl and doesn’t need any specific code. To include it in the Ribbon toolbar, you specify the Ribbon Items Group as an extension using the following XML in your Configuration file:
<ext:extension assignid="ViewItemsGroup" groupid="EditGroup" name="View" pageid="HomePage" insertbefore="PublishGroup"> <ext:group>~/Controls/ViewItemsGroup.ascx</ext:group> <ext:dependencies> <cfg:dependency>My.Theme</cfg:dependency> <cfg:dependency>My.Commands</cfg:dependency> </ext:dependencies> <ext:apply> <ext:view name="DashboardView"> <ext:control id="DashboardToolbar" /> </ext:view> <ext:view name="PageView"> <ext:control id="ItemToolbar" /> </ext:view> </ext:apply> </ext:extension>
The only downside of this approach I could find was that I’m not able to use a RibbonItemGroup inside an already existing group, so I need to specify a complete group and add that as one. But it does however mean that I can create more complex layouts of my buttons and it leaves my Configuration file a lot cleaner.
An added benefit of this appearch of specifying your Ribbon Toolbar buttons is perhaps that you have a lot of examples available. Since the SDL Tridion 2011 Ribbon toolbar is itself also specified completely using these kind of user controls. Take a look at the .ascx files in your ..\Tridion\web\WebUI\Editors\CME\Controls directory on your CMS and you will see what I mean.