Display Database Name in Sitecore Desktop Always

4

August 25, 2010 by Alistair Deneys

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.

database name

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

database name hidden

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 />

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.

database name display customisation

Advertisements

4 thoughts on “Display Database Name in Sitecore Desktop Always

  1. […] little while ago I blogged about how to tweak the startbar in the Sitecore desktop to always display the database name. The issue with the current way in which Sitecore shows the database name is that it puts it on the […]

  2. […] little while ago I blogged about how to tweak the startbar in the Sitecore desktop to always display the database name. The issue with the current way in which Sitecore shows the database name is that it puts it on the […]

  3. Vikram says:

    I’m having problems with .js file.If you dnt mind can please share one of .js file used in this example???

  4. Alistair Deneys says:

    Hi Vikram,
    I didn’t use any javascript in the example above. The database name is populated into the control using C# code. Any of the JS files mentioned above are Sitecore files that come with Sitecore.

    If you’d like to see a completed example, I used the above as the basis of the Sitecore Shared Source Library Customized Startbar module which you can find at http://trac.sitecore.net/CustomizedStartbar.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Categories

The views expressed on this blog are solely my own and do not necessarily reflect the views of my employer.
%d bloggers like this: