Reading Time: 3 minutes

At Tahzoo, we pretty much shoot for HTML5 websites 100% of the time; the only time the project isn’t HTML5 is if the client explicitly says so. We have a current client whose HTML5 site also required some fun Ajax things like creating an interactive poll and even some email functionality. In order to really accomplish what we wanted, we realized it would be necessary to take advantage of some certain HTML5 features and even write a tiny jQuery plugin to help us out.  So if you’re a Tridion developer, this post’s for you.

An Overview of the Project

As part of a client-confidentiality agreement I can’t tell you who the client is or provide you with any details on their business while we’re still in development. I can still share some super basic details that definitely matter if you try this stuff in your own Tridion project. We’re running SDL Tridion 2011, SP1. We also used Alex Klock‘s Razor Mediator (Since he works at Tahzoo, we’re kind of partial to it). We’re using CWA to serve up dynamically embedded components into Page Views, and we use Razor for writing our Component Templates.

Our Use-Cases

We have a poll that an end-user can interact with; they push a button to vote and get the results back. The other thing was email functionality; they can email an article to a friend and we simultaneously update a small counter that shows how often an article has been emailed.

And our Development

For both use-cases, other members of the team wrote custom servlets on our server so that we could have our own API to interact with.  What was crucial was a unique identifier for the article or for the poll. If you know SDL Tridion, the most unique thing about a component is its TCM ID. So it seemed logical to us to expose that TCM ID to the front end.

The Markup

This is the HTML5 piece. We didn’t want to use the ID because we were already using it, and classes seemed silly. And the good folks at HTML5 doctor back us up on this decision:

<article data-tcm="tcm-1234-36"></article> 

So we use our own lil’ data-attribute called data-tcm.

Exposing the TCM ID

Because we’re using Razor, it’s a piece of cake to expose the TCM ID. The first thing we did is add this code block to the top of our Razor Component Templates where the TCM ID becomes a variable:

@{
 var articleTCM = Component.ID.ToString().Replace(":", "-"); 
}

Now that we’ve done that, our next step is to use it:

Back to the Front End

Now that we’re outputting the TCM ID, we’d typically write this jQuery to get the TCM of an element:

var tcm = $('article').attr('data-tcm');

Nothing too wrong with that, but it seems like we could make our lives easier by making it shorter. So for that, we now have a tiny jQuery plugin which I’ve unoriginally called tcmQuery to do this job:

(function( $ ) {
  $.fn.tcm = function (setTCM) {
  	if ( !setTCM ) {
		var tcmid = this.attr('data-tcm');
		return tcmid;
	} else {
		this.attr('data-tcm', setTCM);
	}
  };
})( jQuery );

So, the end result is that now I can do this:

var tcm = $('.article').tcm();

And that’s it

We started off wanting to use the HTML5 data-* as the place to put Tridion’s TCM in the markup. We then wrote a whopping three lines of Razor in our Component Template. Finally, we used a jQuery plugin to make it a tad easier to get that attribute on the front-end.

You’re also free to fork tcmQuery on Github, too.