2013 View in Staging and Live UI eXtension

I must have seen or heard the need for this extension a million times, and yet I myself only built it once (but forgot to release it). So here it is, finally a set of buttons in the UI to view any Page in your CMS on the Staging and Live websites. Not a preview, but an actual view, on the actual site, and you don't need to know the URL (well okay, somebody did need to know it, but you don't need to remember that ;o). Plus of course when you view it in Staging (it opens in a new browser tab, not a small popup window), you can enable XPM directly from there. Then once inside the Experience Manager view, you find a button to open that page on the Live website (again opening in a new full tab in your browser, rather than a small useless popup window).

So lets take a look at it, there are buttons in the ribbon toolbar and on the context menu of every Page:

CME view

When in XPM, you will only see a button to view in Live (you are already on the Staging site ;o):

XPM button

The URLs for the Staging and Live websites are configured in the metadata of the Publication. An example Metadata Schema is delivered in the extension, but you can also just add the two required fields to your existing Metadata Schema for your Publication (allowing you to specify different Staging and Live websites for each language or country Publication).

Publication Metadata

For the rest it is quite straight forward, the extension reads the publish location of the selected Page, and adds that to the (configured) url of the Staging or Live site (depending which button you pressed). Besides being a useful addition to any production environment, the whole extension comes with full source code, so you can extend it further to your own liking. Or even use it to build your own extension which need to do something similar (it contains good examples of adding buttons in the ribbon toolbar and context menu, next to how to deal with an extension in XPM). You can find everything in the download package below, or get it as open source on Google code (feel free to join that project and commit some of your own changes).

Installation

This eXtension comes with full source as a Microsoft Visual Studio solution which you can directly compile and deploy (you can use the free Microsoft Visual Studio Express edition). The Editor project has a post build command to move the DLL and resource (resx) file to the %TRIDION_HOME%web\WebUI\WebRoot\bin and %TRIDION_HOME%web\WebUI\WebRoot\App_GlobalResources directories (assuming you are building it directly on the CMS server). For more details, follow the installation process as described in the Example UI extension. Please note this extension has a resources file (allowing for translation of all labels used in the UI) which needs to be placed in the %TRIDION_HOME%web\WebUI\WebRoot\App_GlobalResources directory.

After installation of the extension, all you need is the mentioned configuration of the Staging and Live site URLs in your Publication Metadata. If you forget to add these fields or leave them empty, the extension will warn you when you press a button. Also one last remark, the extension assumes the Page is published. If the Page you want to view has not been published, you will get a standard 404 error in the newly opened tab (nothing to be alarmed about, but good to know it needs to be published ;o).

This extension is built and tested in SDL Tridion 2013, since it uses the extension model released in SDL Tridion 2011, it should also work there, but you might have to recompile, your mileage may vary...


Developer
:    Bart Koopman
Company
License agreement
Tags
:    view,  2013,  staging,  live,  UI
Version
:   1.0
Source
:   Yes

About the Author
Bart Koopman
Community Development Consultant

As a Community Development Consultant, Bart is the evangelist of all SDL Tridion products. Bart used to be a consultant and trainer at SDL Tridion, supporting both partners and customers with their implementations.

SDL CMT division