Wednesday, March 28, 2012

Dynamic Linking with Tridion and NetBiscuits

Even though the biggest boom of must having everything mobile seems to have gone already there a lot of companies that want to build a new mobile web site. Sometimes you might even encounter a company or two that want a mobile website or an app just for the sake of it. I might write a separate post (=rant) about going mobile without having any strategy for it, but that's a story for a later date.

But now I'm getting side-tracked, the point today is how to utilize dynamic linking with your mobile websites when you're using Tridion and NetBiscuits. I'm going straight to the good parts so if you're just starting with NetBiscuits I suggest you start from here and there.

The Problem

NetBiscuits uses its own markup-language called BiscuitML (BML), in addition of that the RTF-fields in BML use a subset of BBCode to make things even more interesting. Neither BML or BBCode support the standard anchor-elements which the out-of-the-box Tridion-controls output. Using the standard controls actually results in malformed BML and breaking the whole page.

The (partial) Solution

Fortunately the solution is actually quite simple. The approach I took to solve this was instead of creating brand new controls I extended the existing Tridion-controls. The benefit of this is that you can use the same control for outputting the regular HTML-links as well as NetBiscuit BBCode or Link-elements. Also it means that if anything changes with the original control you can just recompile the project with the new DLL.

To use the new features just add an additional attribute "NetBiscuitLinkType" to the ComponentLink-control with one of the three values URL, URLNoFollow or Link (case insensitive). For example: You should use URL and URLNoFollow-attributes when you want to use your links inside RTF-fields (i.e. BBCode) and Link-attribute when you want an independent link (see BiscuitML-reference for more details). The output for each attribute:

Output with value "Url": "UrlNoFollow" respectively: ...And with value "Link":
Because you have to set the attribute to the control manually you still have to figure in which context the (dynamic) link is used. Fortunately, it is relatively simple, because you add the control-tags in your templates so in most of the cases you know if the link will be inside RTF-field or if it is used independently.

You can use simple RegEx to parse all the ComponentLink-tags and add the additional attribute to them that way (yes, go ahead, you can safely match the tags in the HTML with RegEx because they're not arbitrary, you won't be summoning any Great Old Ones). I will try to add some example TBB(s) how to do this part of the solution later on.

Where to get it?

You can grab the project from GitHub. At the moment it is only available for .Net and only handles Component Links.


Any suggestions and contributions are welcome!

EDIT: The project is now updated with a TBB to handle the conversion to ComponentLink-tags, see GitHub for installation/usage instructions

No comments:

Post a Comment