Tridion GUI Extensions : How to load a JavaScript without showing a GUI element

January 30, 2012

A while ago I was struggling with the above mentioned challenge: I wanted to load some JavaScript into the Tridion Content Manager GUI, but without showing a corresponding GUI element (Button, list, etc).
I searched the online documentation portal, the good old forum, searched all the Tridion blogs, but could not find it.
With no other option left, I turned to the experts. Since not too long, they can also be found here.
(And while you’re there, why not join us?)

It took precisely 3 minutes and I had my answer. Since I could not find it, I assume you also cannot find it. That’s why I share it here.
But not without mentioning the one who gave me the answer: Frank. Thanks.

For adding a JavaScript to extend the Tridion Content Manager GUI, but without showing a button or list or whatever, the following configuration is needed:

1. Add the following configuration to your ‘Editor.config’ (config file to configure your GUI Extension):

<cfg:groups>
<cfg:group name="MyGroupName">
<cfg:domainmodel name="MyName">
<cfg:fileset>
<cfg:file type="script" id="MyId">/Relative/Path/MyJavaScript.js</cfg:file>
</cfg:fileset>
<cfg:services />
</cfg:domainmodel>
</cfg:group>
</cfg:groups>

This piece of configuration makes sure that your javascript file is loaded for the complete GUI. This might not be what you want.
Let’s say you only want to load your methods/classes for a certain view, let say the Component-edit screen. You can achieve this by adding the following code to your
JavaScript file:

//If you only want your code to affect certain screens/views, you should listen to Anguilla events like this:
$evt.addEventHandler($display, "start", onDisplayStarted);

// This callback is called when any view has finished loading
function onDisplayStarted() {

    $evt.removeEventHandler($display, "start", onDisplayStarted);

    if ($display.getView().getId() == "ComponentView") {
            //Work your magic!
       }
}

It’s easy once you know how đŸ˜‰

Advertisements

DD4T Continued: rendering component presentations

January 20, 2012

In my previous post I discussed how to get started with ASP.NET MVC3 and Tridion using the opensource DD4T framework.
In this post I want to show you how DD4T handles the rendering of ComponentPresentations on a page.

In my previous example, the whole HTML of the (Tridion)page was rendered by only 1 (razor)view. This is not a desired scenario, because it leads to big views and re-use is almost impossible.
Tridion handles this quite nicely by using Component Templates. These templates are responsible for rendering their own little piece of content. And this is exactly what you want in your webapplication.

So, how to implement this using the DD4T framework? Lets find out by creating a simple page.

First, create a page in Tridion with 2 (or more) ComponentPresentations and publish the page. (Make sure your Component Templates are DD4T templates and have a metadatafield called ‘view’ with the name of an existing view in it!. See my previous post on how to create a DD4T Component/Page Template)

DD4T needs to know which (default) Controller to use. This needs to be configured in your Web.config. Add the following 2 lines of code in your Web.config:

    <!-- Config values for the DefaultComponentPresentationRenderer-->
<add key="Controller" value="TridionComponent"/>
<add key="Action" value="Component"/>

Next, we have to write some code to handle the rendering of the ComponentPresentations.
1. Create a new controller and name it ‘TridionComponentController’.
2. Add the following code in this controller:

using System.Web.Mvc;
using DD4T.Mvc.Controllers;
using DD4T.ContentModel;

namespace Sample_WebApplication.Controllers
{
    public class TridionComponentController : TridionControllerBase
    {

        public ActionResult Component(ComponentPresentation componentPresentation)
        {
            return base.ComponentPresentation(componentPresentation.Component.Id);
        }
    }
}

This controller is used to render each ComponentPresentation on a page. The TridionControllerBase class reads the metadata from each ComponentPresentation to find out which razorview to use. The result of the Action-method is a rendered componentpresentation.

Now, create a folder ‘TridionComponent’ in the ‘Views’ folder, and create a new razoriew. Give this view the same name as you defined in the metadata of your ComponentTemplate. So, in my case that is ‘Article’.
Add your HTML to this new View. My Article view looks like this:

@using DD4T.ContentModel;
@using DD4T.Mvc.Html;
@model IComponentPresentation

Component title: @Model.Component.Title

<h1>@Model.Component.Fields["title"].Value</h1>
<p>@Html.Raw(Model.Component.Fields["summary"].Value)</p>
<p>
    @Html.Raw(Model.Component.Fields["body"].Value)
</p>

Now we have to adjust our main view to NOT render the ComponentPresentations inline, but to use our new controller and the DD4T ‘ComponentPresentation’ Action method.
Open your Page view (In the folder TridionPage, General.cshtml) and add the following code:

@using DD4T.ContentModel;
@using DD4T.Mvc.Html;
@model IPage

<html>
<head>
<title>@Model.Title</title>
</head>
<body>
<p>
Some info about this page:<br />
Filename: @Model.Filename<br />
Title: @Model.Title<br />
Publication Title: @Model.Publication.Title<br />
</p>

<h2>ComponentPresentations on this page</h2>
@Html.RenderComponentPresentations()
</body>
</html>

Notice the @Html.RenderComponentPresentations()? This is a HTML helper from the DD4T framework that renders all the componentpresentations on the page, using our newly created ‘TridionComponentController’.

This ‘RenderComponentPresentation’ HTML helper renders ALL the ComponentPresentations, but often you only want to render certain ComponentPresentations. For instance, you want to render ‘Banner’ components in another section on your page then your ‘Article’ elements.
This can be achieved by using one of the overloads from the ‘RenderComponentPresentations’ HTML helper.

To only render ComponentPresentations that are based on a certain schema, you can use this code:

@Html.RenderComponentPresentationsBySchema("ArticleSchema")

To render ComponentPresentations based on a certain ComponentTemlate, you can use this code:

 @Html.RenderComponentPresentationsByView("Article")

Or, if you want to render ComponentPresentations based on multiple ComponentTemplates, you can use this code:

 @Html.RenderComponentPresentationsByView(new[] {"Article", "FullArticle" })

I hope this helped you to understand how ComponentPresentations are handled by the DD4T .NET framework.
Let me know if you have more questions or problems using the above code.