SDL Tridion 2013 SP1 comes with a lovely new interface (Carbon 2.0) which features a Side Panel navigation thatÂ allows users to jump through to other SDL products and remain within the same interface. Â What’s also cool is that you can also add your own items and tools to the side panel, and with this simple example,Â I hope to show you how easy it is.
The process is pretty simple:
- Create a web page
- Add your page location to the CME ‘Editors’ as a virtual directory
- Configure your link within the Side Panel
- That’s it!
1. Creating a Web Page
Here you can create a simple HTML webpage, or should you wish to use more dynamic functionality (including Tridion’s own GUI framework) you can use an ASPX page.
I’ve create my webpage as an .aspx file (ContentBloom.aspx) and have included it in a folder called ‘SidePanel’.
<%@Page Language="C#" AutoEventWireup="true"
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h1>Welcome to the Content Bloom Example landing dashboard page</h1>
Note: I’m inheriting ‘Tridion.Web.UI.Editors.CME.Views.Dashboard’ but you can also write your own class here. Â Documenting how this works would take pages and pages, I would suggest reading up on GUI extensions and studying some examples if you wish to know more.
2. Add your file location to the CME Editors
Open up Internet Information Services (IIS) and browse through your SDL Tridion website, to the location: WebUI > Editors and create a new virtual directory, in this example, my virtual directory is called ‘ContentBloomSidePanel’.
The virtual directory path should point to the folder where your webpage is created, as part of step 1 above.
We add this reference to ensure our page can run under the CMS URL as we’ll need to configure the path to our file in the next step.
3. Configure your link
Open up a file called manifest.xml, which is located in:
This page contains the links that are shown within the Side Panel.
The XML structure is simple to understand,Â the basic structure is as follows:
Â Â Â <applicationEntryPointGroup>
Â Â Â Â <applicationEntryPoints>
Â Â Â Â Â <applicationEntryPoint>
Â Â Â Â </applicationEntryPoints>
Â Â Â </applicationEntryPointGroup>
You’ve two options:
- Create your ownÂ <applicationEntryPointGroup>, in which case your link will appear as a top-level item or
- CreateÂ <applicationEntryPoint> within the existing group which houses the links related to SDL Tridion.
Whatever you chose, your entry point contains a number of attributes:
- ID – the ID you wish to give to your page, this is shown in the CMS URL
- Title – the link title that is shown
- DomainID – the domain you wish to use for the application, domains are also configurable within this document should your file exist on another domain, in which case you don’t need to create the Virtual Directory in step 2.
- URL – The Url that is used when the user clicks the link
- Icon – the path to an image icon that is shown along side the link
So my actual <applicationEntryPoint> node looks like this:
<applicationEntryPoint id="content-bloom" title="Content Bloom"
You’ll also notice that within this file there also exists an opportunity to configure translations, to keep this example simple, I have not include translations, but the process is incredibly simple:
Â Â Â Â Â <translations>
Â Â Â Â Â <titlelang="fr">Bonjour</title>
Â Â Â Â Â <titlelang="es">Hola</title>
Â Â Â Â </translations>
Once you’re all saved, clear your browser cache and restart SDL Tridion and your link and CMS functionality should magically appear