Display Database Name in Sitecore Desktop Always

I’ve often seen (and experienced myself) people editing content inside the Sitecore desktop whilst in the web database. This is usually because they’ve swapped over to the web database using the database switcher icon in the startbar for some reason, like checking the published content (one of the activities in the SND course), and have forgotten to change back to the master DB before they start editing. This situation is normally found when the user performs a publish and loses all their updates :( .

Sitecore contains a feature to show the current content database, but this label is put on the desktop surface which gets hidden as soon as you have a maximised application window.

You can see in the above screenshot the database name on the desktop.

And how it’s hidden when you maximise an application.

What’s more, the database name label colour is green…not particularly contrasting on some of the desktop backgrounds. Lucky for us we can customise the Sitecore UI however we like.

So let’s get down to some Sitecore UI customisation. The UI environment of Sitecore is called “Sheer UI”. Sheer UI supports defining UI components in a high level XAML like language, which much of the Sitecore UI is written in. This is quite handy as it means you can view the code that makes up the UI quite easily. The UI code is compiled at runtime meaning the code files (XML files) themselves are shipped with Sitecore. This does wonders for investigating and understanding Sheer UI and how Sitecore achieves some of it’s wonderful eye candy.

I mentioned the UI is compiled at runtime. Just to take you through a quick overview of how Sheer UI works; each control is identified by name much like C# classes are defined. Sure you’re class “MyClass” should sit inside a file called “MyClass.cs”, but it’s not the name of the file that identifies the class, it’s the class definition inside the file that does that. When Sitecore initialises it checks all folders that have been registered to contain XML layout files. This is because we don’t want to traverse the entire Sitecore folder tree looking for files which might not even contain Sheer UI components. These folders are registered in your configuration (web.config and config patch files) in the /configuration/sitecore/controlSources node.

Sitecore builds up a dictionary of controls referencing them by name. During this discovery phase the Sitecore UI engine creates a C# class from each XML file found and compiles the resulting class. You can see evidence of the generated classes by checking any of the debug folders under the Sitecore folder tree such as WebSite\sitecore\shell\Applications\debug.

So where does the control name come from? The control declaration inside the XML layout file. The below control would be identified through the name Startbar.

<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition"
  xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense"
  xmlns:shell="http://www.sitecore.net/shell">

  <Startbar>
    <!—Insert controls here -->
  </Startbar>

</control>

And that brings us to the starting point of our database name display customisation. Sitecore contains a Sheer UI control named Startbar which is defined in the WebSite\sitecore\shell\Applications\Startbar\Startbar.xml file. Now, we could start our customisation by hacking into the existing file and changing it, but a better approach is to override the existing control. Sitecore provides a facility to override any of the Sheer UI controls defined in your XML layout files (you can tell Sitecore is geared for customisation :) ). To do this we’ll copy the existing Startbar.xml file from above into the WebSite\sitecore\shell\Override folder. The Startbar control we define in this file will override and replace the one defined by Sitecore.

The benefit of overriding controls rather than updating the existing XML layout files is for future upgradability. If you were to upgrade your Sitecore version and the file you’ve customised was updated as part of that release your file would be overwritten when you upgrade and you’d lose your customisation. By separating your customisations into separate files you protect yourself and make it clearer as to exactly what you’ve customised.

First thing I need to do to the Startbar control is to add a new label that will hold the name of the current content database (remember, the context database inside the Sitecore shell is core, not master).

Find the existing table with ID StartbarTray and alter as follows:

<table id="StartbarTray" style="color:white; font:8pt tahoma"
  border="0" cellpadding="0" cellspacing="0" height="27"
  GridPanel.Width="200">
  <tr>
    <td>
      <SubmittableEdit ID="SearchBox" Submit="Search" />
    </td>
    <td>
      <Border ID="DatabaseName" Class="scDatabaseName"
        onmove="javascript:this.style.left=(scForm.browser.getControl('Startbar').offsetWidth
        -this.offsetWidth-4)+'px'"></Border>
    </td>
    <!-- Start: show database name always -->
    <td>
      <GridPanel Padding="5" style="color:white;">
        <Label ID="DatabaseNameLabel" />
      </GridPanel>
    </td>
    <!-- End: show database name always -->
    <td ID="Tray" style="white-space:nowrap"></td>
    <td ID="Clock" style="white-space:nowrap"></td>
  </tr>
</table>

Now we can programmatically set the text displayed in the label. There are 2 ways to do this in Sheer UI. First approach would be to create a code-beside class and add that into the control’s definition. But seeing as though this is such a simple and straight forward customisation I’ll go with the second approach: inline code. An added benefit of using inline code is that all the customisation is kept to a single file and I don’t have to worry about an additional assembly in my bin folder. To add the inline code I’ll go back to the top of my file and add the def:code element as a child of the control name element, under the stylesheet declarations.

<Startbar>
  <Script Src="/sitecore/shell/applications/Startbar/Clock.js"/>
  <Script Src="/sitecore/shell/applications/search/Instant/instantsearch.js" />
  <Stylesheet Src="/sitecore/shell/applications/search/Instant/InstantSearch.css" />

  <def:Code>
    protected override void OnLoad(EventArgs args)
    {
      base.OnLoad(args);
      if(!Sitecore.Context.ClientPage.IsEvent)
      {
        DatabaseNameLabel.Header = Sitecore.Context.ContentDatabase.Name;
      }
    }
  </def:Code> 

  <shell:StartMenu />
</Startbar>

And that’s it. Now when you log into Sitecore (might need to restart IIS so the Sheer UI controls get rebuilt) you’ll have the database name always visible next to the database changer icon.