LibrarySites.Banner

Adding the Ribbon to Sheer UI Applications

Sitecore 7.1 included the release of SPEAK, a technology that greatly simplifies the process of creating user interfaces for use inside the Sitecore client. But Sitecore partners and customers don't upgrade their servers immediately. In fact, Sitecore still has a good number of customers running Sitecore 6 who have no plans to upgrade in the near future. 

So if you're building a module for Sitecore, Sheer UI is still something to consider, especially if you want your module to be compatible with earlier versions of Sitecore. This post describes how to add the ribbon to a Sheer UI application.

Create the Application Definition Item

The first step is to define an application.

  1. Using Content Editor, open the core database.
  2. Navigate to /sitecore/content/Applications.
  3. Create the following item:
    • Template: /sitecore/templates/Sitecore Client/Applications/Application
    • Item name: Sample Dialog
  4. Set the following field values:
    • Display name: Sample Dialog
    • Icon: Software/32x32/application.png

Create the Ribbon Definition Items

The ribbon will contain a single chunk with a single button.

  1. Create the following item:
    • Parent item: /sitecore/content/Applications/Sample Dialog
    • Template: /sitecore/templates/System/Ribbon/Toolbar
    • Item name: Ribbon
  2. Create the following item:
    • Parent item: /sitecore/content/Applications/Sample Dialog/Ribbon
    • Template: /sitecore/templates/System/Ribbon/Strip
    • Item name: Strip
  3. Create the following item:
    • Parent item: /sitecore/content/Applications/Sample Dialog/Ribbon/Strip
    • Template: /sitecore/templates/System/Ribbon/Chunk
    • Item name: Chunk
  4. Set the following field values:
    • Item: /sitecore/content/Applications/Sample Dialog/Ribbon/Strip/Chunk
    • Header: My Chunk
  5. Create the following item:
    • Parent item: /sitecore/content/Applications/Sample Dialog/Ribbon/Strip/Chunk
    • Template: /sitecore/templates/System/Ribbon/Large Button
    • Item name: Button
  6. Set the following field values:
    • Item: /sitecore/content/Applications/Sample Dialog/Ribbon/Strip/Chunk/Button
    • Header: My Button
    • Icon: Business/16x16/message.png
    • Click: MyButtonClick

Create the XAML File

The XAML file must be in a location where Sitecore can locate it. The paths where Sitecore looks for XAML files is defined in web.config under /configuration/sitecore/controlSources.

NOTE: For simplicity I am going to add my file to one of the paths that are already defined in web.config. For a real module you should create a custom config file and define a custom path for your XAML files.

Create a file named SampleDialog.xml in the /layouts folder on the Sitecore server:

<?xml version="1.0" encoding="utf-8" ?>
<control>
  <SampleDialog>
    <Stylesheet Src="Ribbon.css" DeviceDependant="true"/>
    <CodeBeside Type="Testing.Sheer.SampleDialog, Testing.Sheer"/>
    <FormPage>
      <Border ID="Grid">
        <Border ID="RibbonPanel"/>
      </Border>
      <GridPanel class="scBackground" vAlign="top" Height="100%" Width="100%" Cellpadding="5">
        <Border align="Center">
          <Literal runat="server" ID="Literal" Text="This text will be replaced when the button is clicked." />
        </Border>
      </GridPanel>
    </FormPage>
  </SampleDialog>
</control>

Create the CodeBeside Class

A class is needed to load the ribbon and to contain the logic that runs when the button in the ribbon is clicked.

using System;
using System.Linq;
using System.Web;
using Sitecore.Diagnostics;
using Sitecore.Shell.Framework.Commands;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Sheer;
using Sitecore.Web.UI.WebControls.Ribbons;
 
namespace Testing.Sheer
{
    public class SampleDialog : BaseForm
    {
        //defines the location of the item in the core database that represents the ribbon
        private const string RIBBON_PATH = "/sitecore/content/Applications/Sample Dialog/Ribbon";
 
        //corresponds to the literal defined in the XAML file
        protected Literal Literal;
         
        //corresponds to the border defined in the XAML file
        protected Border RibbonPanel;
         
        protected override void OnLoad(EventArgs e)
        {
            Assert.ArgumentNotNull(e, "e");
            base.OnLoad(e);
 
            if (! Sitecore.Context.ClientPage.IsEvent)
            {
                this.UpdateRibbon();
            }
        }
 
        //instantiates the ribbon and adds it to the page
        protected virtual void UpdateRibbon()
        {
            var child = new Ribbon
            {
                ID = "MyRibbon",
                CommandContext = new CommandContext()
            };
            var item = Sitecore.Context.Database.GetItem(RIBBON_PATH);
            Error.AssertItemFound(item, RIBBON_PATH);
            child.CommandContext.RibbonSourceUri = item.Uri;
            this.RibbonPanel.Controls.Add(child);
        }
 
        // This method is called when the button in the ribbon is clicked.
        // The method is specified in the Sitecore item in the core
        // database that represents the button.
        protected virtual void MyButtonClick()
        {
            this.Literal.Text = DateTime.Now.ToString();
        }
    }
}

Add Shortcut to the Sitecore Desktop Start Menu

Adding a shortcut to the Sitecore Desktop start menu makes it possible for users to access the application.

  1. Create the following item:
    • Parent item: /sitecore/content/Documents and settings/All users/Start menu/Programs
    • Template: /sitecore/templates/Sitecore Client/Start menu/Start menu folder
    • Item name: Sample Dialog

Testing the Application

A new icon appears in the start menu under All Applications.

The dialog displays the button defined in the core database. Clicking the button changes the text in the middle of the page.