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.
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:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Example.Controls.DeckPages.MainDeckPage" %>
<div id="MainDeckPageOverlay" class="stack horizontal">
<div class="label stack-elem">
<asp:Label runat="server" Text="Stack Overflow" />
<div class="separator line stack-elem"></div>
<div id="MainDeckPageButtonsHolder" class="line stack-elem">
<c:extendablearea id="MainDeckPageButtons" runat="server"></c:extendablearea>
<c:extendablearea id="MainDeckPageBody" runat="server"></c:extendablearea>
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.
<ext:extension assignid="FirstButton" name="Newest">
<ext:control id="MainDeckPageButtons" />
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:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Example.Controls.ExtendedAreas.FirstButtonWidgetsView" %>
<div class="widgetsviewfilter" id="FirstButtonWidgetsViewFilter" style="height: 25px;">
<div id="FirstButtonWidgetsViewFilter_addressBar" class="addressbar" c:separator="" c:itemsize="20">
<span class="addressbaritem home" c:uri="edu:training" title="First (edu:training)" tabindex="1">First View</span>
<c:deck runat="server" id="FirstButtonPages" class="stack horizontal">
<c:DeckPage runat="server" id="FirstButtonPage" SourceEditor="Example" ExternalControl="~/Controls/DeckPages/FirstButtonPage.ascx" PageType="FirstButtonPage" />
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.
public class MainDeckPage : TridionUserControl
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.