How to create the custom buttons horizontally one below the other in ribbon of Tridion

Question

How to place more than one custom buttons horizontally - one below the other in tridion ribbon.

Like we have Check-in, Check-out, Undo Check-out buttons.

I tried in creating more than one custom buttons by placing them in a group, but by default they were getting aligned side-by-side but not one below the other.

Answer 1

In one of my articles on Tridion Developer I explained all about how to use the Ribbon Item Group, this fits small buttons under each other, so that you can place 3 buttons in the space of 2 large ones (which are next to each other).

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>