In a DD4T implementation, your templates generate data (XML, JSON) instead of HTML. It’s the web application which turns this data into good-looking HTML pages (or so one would hope).
One disadvantage of this approach is that it renders the built-in preview functionality of the Tridion GUI virtually useless, as you can see here.
But wait, on second thought DD4T can actually improve the quality of your previews drastically. It just requires a little work.
This trick only works for ASP.NET MVC sites based on Tridion and DD4T.
Here’s what you do.
1. Add a PreviewPage TBB to your page templates
Open each of your page templates in the template builder and add the template building block ‘PreviewPage’ to it. It must be the last TBB in the template!
2. Create and upload a DD4T.config file
Create a file called DD4T.config and copy the following lines into it:
<?xml version="1.0"?> <configuration> <appSettings> <add key="StagingUrl" value="http://my.staging.site/Preview"/> </appSettings> </configuration>
Replace ‘http://my.staging.site’ with the URL of your staging environment.
Upload the file to the config folder inside your Tridion installation (on your TCM server or servers).
For more about configuring DD4T templates, see this post.
3. Add a preview route to your web application
Go to your web application (in Visual Studio) and open the file RouteConfig (it is usually in the App_Start folder, at least in MVC4 and 5).
Add the following route ABOVE the route for your normal pages:
//Preview page route
routes.MapRoute(
“PreviewPage”,
“Preview”,
new { controller = “Page”, action = “PreviewPage” }
);
Note that the second argument (‘Preview’) is the url. This must match the path section of the StagingUrl in your DD4T.config file.
Of course you must make sure your application is deployed (e.g. to your staging target). The URL should match the ‘StagingUrl’ setting in your configuration.
4. Fix paths
If you were to preview your pages now, you would see something vaguely reminiscent of your published web site, but it will probably be completely distorted. That’s because the references to CSS, JS and images files won’t work. These URLs are normally relative to the server which hosts the site, and since the preview is served by your CMS server and not your web server, the browser won’t find those static resources.
It can be solved with a simple C# Fragment. It inserts a ‘base href’ element inside the head section of the HTML. Make sure the URL (the purple part) is the correct URL for your staging environment:
Item outputItem = package.GetByName("Output");
string output = outputItem.GetAsString();
output = output.Replace("<head>",
"<head>\r\n<base href=\"http://www.staging.myorg.org/\"/>");
package.Remove(outputItem);
outputItem.SetAsString(output);
package.PushItem("Output", outputItem);
That’s all. Now if you preview a page from the Tridion GUI, it could look like this:
The great thing about this is: everything works. Unlike a regular Tridion preview, which shows only the output of your templates, the DD4T preview is the result of a normal rendering action for a page. This means that (almost) all the functionality on the site works in your preview just like it will on the site. Things like component linking, broker queries, even full text search will work normally. In fact, the screenshot above shows news articles which were retrieved dynamically from the broker!
The only exception to this is functionality which relies on the URL of the request. Still, this type of preview is a lot more functional than any ‘classic’ Tridion preview I’ve ever seen.
Happy DD4T’ing!