Extending the SDL Tridion dashboard in both the CME and Experience Manager

When you open up the SDL Tridion UI for the first time you are directed to the SDL Tridion tab which shows you a welcome screen, this is sometimes also referred to as the SDL Tridion dashboard. If you open the Experience Manager view, you actually see that the first tab is called “Dashboard”. This dashboard contains useful information for an editor and is even extensible, allowing for a rich user experience on your extensions. Typical things are settings for your own extensions, or perhaps user specific pages (like a custom page, but then tailored to the logged in user) since you have all the UI capabilities available here.

Extending the SDL Tridion dashboard is all about DeckPages, OptionsPanels and ExtendedAreas, basically nothing more than a couple of TridionUserControls or .ascx pages. To explain the possibilities I’ve created an example UI extension, which adds a new option to the SDL Tridion dashboard OptionsPanel (menu item on the left hand side of the dashboard) in both the Content Manager Explorer (CME) and the Experience Manager (SiteEdit). This option loads a DeckPage when selected, and inside that DeckPage you can add user controls through ExtendableAreas. Below is a screenshot of how this extension looks in the CME.

Stack Overflow dashboard

Now let’s start with taking apart the main deckpage, it is a very simple user control which exposes two extendable areas, one for the buttons and body part for the content. The html of this deckpage (an .ascx) looks as follows:

To add the buttons to the page, we need to look at the configuration of the UI extension (an editor extension). Since our deckpage defined two extentable areas, we can now simply add a button under the ext:extendableareas element in the configuration, applying it to the TridionDashboard view (or DashboardView for SiteEdit) and for the control, we reference the id of the extendablearea control (MainDeckPageButtons in this example). See below a snipped of the configuration, adding the first button.

The button itself is actually another deckpage or user control, containing a button control in its html. Below the buttons there is another extendable area in which we can place the content for the selected button. This is the same as with the button, but now we apply it to the control with the id: MainDeckPageBody. This user control loads another deckpage which contains our actual content, it does that by adding a deckpage control:

So far we have used 4 different deckpages (user controls) and with that, we have extended the options panel (left hand navigation) and added a button with a content area below it. Inside the actual page for the first button (FirstButtonPage.ascx) there is an iframe in which I load my content to keep this example simple. But basically you can build up this page like any other UI page, with (custom) user controls.

To wire it all up, there is a JavaScript and Stylesheet file available for all user controls (.ascx pages). These files are grouped together using the editor configuration file again. Here is an example of the group for the main deckpage.

The name of the group is used in the code behind (.cs) file for the MainDeckPage.ascx, to reference its control resources, through this mechanism the JavaScript and Stylesheet files are loaded inside the SDL Tridion UI and made available. The ControlResources attribute is used for this as follows.

As you can see there is no further C# code for the deckpage, all of the logic is handled in the JavaScript file. I won’t try to explain all the JavaScript code in this article, but will let the code speak for itself. I’ve placed the entire example UI extension on SDL Tridion World, complete with all source code, so you can install it and look for yourself what does what. Feel free to take it apart completely or reuse as a basis for your own UI extensions.

What was most revealing to me, while building this extension, was the fact that it shows how the UI extension framework really works. By adding extendable areas to your own deckpage, you are making your extension extensible itself. It’s directly used for adding the buttons and deckpages for the button content, but you also made it possible for somebody else to extend your extension again.

This entry was posted in Community, Extensions, Tridion 2011, UI by Bart. Bookmark the permalink.

About Bart

Working as a Technical Product Manager, Bart is the evangelist of all SDL Web products and the Digital Experience Accelerator in particular. Bart has worked for SDL since 2003 as a technical support engineer, consultant and trainer, supporting both partners and customers with their implementations. Bart was one of the original developers of the first version of DXA, and currenlty determines the future of it.

3 thoughts on “Extending the SDL Tridion dashboard in both the CME and Experience Manager

  1. Very useful example, Bart. A lot of my recent work has been with customers looking to add Experience Manager to an existing CME-only setup.

    I especially like the StackOverflow extension.

    Oh and, extend-able extensions? It’s Extendception! http://inception.davepedu.com/

  2. Hi Bart,

    thanks a lot for your nice example.
    I tried to implement it but i encountered the following error :

    Could not load type ‘Gmi.Extensions.Controls.DeckPages.MainDeckPage’.

    I used the following code (in MainDeckPage.ascx) :

    In MainDeckPage.ascx.cs, i have the code :

    namespace Gmi.Extensions.Controls.DeckPages
    public class MainDeckPage : TridionUserControl

    For information, I have another extension that uses ‘Extensions.Controls.DeckPages.MainDeckPage’ and there is no error.

    If you have any suggestion, thanks a lot.

  3. Hi Okacemi,

    Technical/implementation questions you can best directly ask on http://tridion.stackexchange.com/ there is a much larger audience that will help you there. But my first guess would be a typo or mismatch in your configuration or one of the files it references.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>