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:
<ext:issmallbutton>true</ext:issmallbutton>
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.
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:
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.
Great explanation and useful for any binary actions (publish vs. unpublish).
More interesting is once wired up, it looks like we can update these consolidated .ascx (and maybe update the dll) without needing to revisit the system configuration for every button change, at least for a particular grouping.
Thanks Alvin, I agree it looks a lot nicer to configure a button in the .ascx than it does in the configuration (with all the references in there). But I guess its just how you look at it, because in essence the .ascx is nothing more than an extension to the configuration file they way its used here.
Hi Bart, is this extension confirmed to work with the new UI/Experience Manager (formerly known as SiteEdit)?
I haven’t tried it myself yet, but since the Experience Manager uses the same extension model, when you extend its ribbons you should be able to use this same technique in there.
Hi Bart, i tried to make it work on XPM too, but by providing view as “EditorView” and control as “MainToolbar” (got these by inspecting the viewsource of existing ribbontoolbar), it doesnot work. After providing this, page itself stops working once i click on XPM button on the page. Any help on this?
Hi Khushboo, questions like yours can best be asked on the http://tridion.stackexchange.com site, there you will find all the help you need.