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.

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

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="http://www.sitecore.net/xmlconfig/">http://www.sitecore.net/xmlconfig/</a>" xmlns:x="<a href="http://www.sitecore.net/xmlconfig/">http://www.sitecore.net/xmlconfig/</a>">
  <sitecore>
    <commands>
      <command name="pt:recentdocuments" type="PT.Personal.Commands.RecentDocuments, PT.Personal" />
    </commands>
  </sitecore>
</configuration>

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="http://schemas.sitecore.net/Visual-Studio-Intellisense">http://schemas.sitecore.net/Visual-Studio-Intellisense</a>" xmlns:shell="<a href="http://www.sitecore.net/shell">http://www.sitecore.net/shell</a>">
  <Gallery.RecentDocuments>
    <Gallery>
      <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"/>
        <MenuLine/>
        <Gallery.Grip/>
      </GridPanel>  
    </Gallery>
  </Gallery.RecentDocuments>
</control>

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");
      base.OnLoad(e);
      if (!Context.ClientPage.IsEvent)
      {
        StringBuilder result = new StringBuilder();
        RenderRecentDocuments(result);
        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
    {
      get
      {
        return Context.User;
      }
    }

  }
}