Sitecore Large Gallery Button

Have you noticed the Navigate section in the Sitecore shell? It contains a series of buttons that displays customized drop-downs. These drop downs are called Galleries. Galleries are custom XAML forms triggered by the Large Gallery Button. Creating a Gallery differs from creating other buttons, as the Command contains no code. Instead, you assign a Gallery which is magically assigned to the button. I’ll show you how.

Recent Items is a custom gallery

Custom Gallery

The Large gallery Button is created the usual way. Go to the core database and find the button chunks at /sitecore/content/Applications/Content Editor/Ribbons/Chunks. Find the appropriate chunk and create a Large Gallery Button. In the large gallery button you assign a Command, and a Gallery.

Large Gallery Button

Large Gallery Button

The value in the Gallery field serves as a sort of namespace, which I will show later. Now Sitecore is ready for your code.

Here is the code you need: You need a Command class that you register in the /App_Config/Commands.config. Then you need a Gallery XML file containing the XAML code, and a Gallery form class that contains the XAML code-behind.

In my example I create a Gallery that displays the last 10 documents modified by the current user. The command is called “pt:recentdocuments“, and I create an include file that registers the code:

<configuration xmlns:patch="<a href=""></a>" xmlns:x="<a href=""></a>">
      <command name="pt:recentdocuments" type="PT.Personal.Commands.RecentDocuments, PT.Personal" />

The codebehind is very simple, as it contains a lot of nothingness:

namespace PT.Personal.Commands
  public class RecentDocuments : Command
    public override void Execute(CommandContext context)

Now on to the Gallery. In the Gallery  field of the Large Gallery Button I write Gallery.RecentDocuments. Sitecore will use this to magically find the correct XML file containing Gallery.RecentDocuments. You can place the XML file where you like it. Mine is placed in the /sitecore modules/shell folder:

<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="<a href=""></a>" xmlns:shell="<a href=""></a>">
      <Stylesheet Src="Content Manager.css" DeviceDependant="true"/>
      <Stylesheet Src="/sitecore modules/Shell/PT.Personal/Presentation/Gallery RecentDocuments.css" />
      <CodeBeside Type="PT.Personal.Presentation.RecentDocumentsForm,PT.Personal"/>
      <GridPanel ID="Grid" Width="100%" Height="100%" Fixed="true">
        <Scrollbox ID="Links" GridPanel.Height="100%" GridPanel.Width="100%" GridPanel.VAlign="top" Width="100%" Height="100%" Background="#F4F4F5" Padding="0px" Border="none"/>

Notice the Gallery.RecentDocuments tag? This is the tag that matches the name in the Gallery field, and is responsible for connecting my Gallery to the button. Now, the codebehind for the Gallery is where the magic happens:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using Sitecore;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Globalization;
using Sitecore.Resources;
using Sitecore.Security.Accounts;
using Sitecore.Shell.Applications.ContentManager.Galleries;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Sheer;

namespace PT.Personal.Presentation
  public class RecentDocumentsForm : GalleryForm
    protected Scrollbox Links;

    public override void HandleMessage(Message message)
      Assert.ArgumentNotNull(message, "message");
      Invoke(message, true);
      message.CancelBubble = true;
      message.CancelDispatch = true;

    protected override void OnLoad(EventArgs e)
      Assert.ArgumentNotNull(e, "e");
      if (!Context.ClientPage.IsEvent)
        StringBuilder result = new StringBuilder();
        Links.Controls.Add(new LiteralControl(result.ToString()));

    private void RenderRecentDocuments(StringBuilder result)
      result.Append("<div style=\"font-weight:bold;padding:2px 0px 4px 0px\">" + Translate.Text("Recent Items modified by") + " " + CurrentUser.Profile.FullName + ":</div>");
      IEnumerable<Item> searchedItems = SearchForItems().OrderByDescending(w => w.Statistics.Updated).Take(10);
      foreach (Item item in searchedItems)
        result.Append(string.Concat(new object[] { "<a href=\"#\" class=\"scLink\" onclick='javascript:return scForm.invoke(\"item:load(id=", item.ID, ",language=", item.Language, ",version=", item.Version, ")\")'>", Images.GetImage(item.Appearance.Icon, 0x10, 0x10, "absmiddle", "0px 4px 0px 0px"), item.DisplayName, " - [", item.Paths.Path, "]</a>" }));

    private IEnumerable<Item> SearchForItems()
      return Context.ContentDatabase.SelectItems("fast:/sitecore/content//*[@__updated by = '" + CurrentUser.Name + "']");

    private User CurrentUser
        return Context.User;


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, Sitecore 6 and tagged , , , , . Bookmark the permalink.

2 Responses to Sitecore Large Gallery Button

  1. Ivan Buzyka says:

    As far as I know such practice is widely used in many modules application such as applications of Web Forms For Marketers and ECM.
    I’ve recently digged some of ECM one in.
    After reading this post a can say: “Now I know the theory”. Thanks to Author :)

  2. Pingback: Sitecore fast query « Brian Pedersen’s Sitecore and .NET Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s