Writing my first Dynamicweb Tag Extension

I am a front-end developer, and my domain used to be HTML, Javascript, CSS and other front-end technologies.
Lately the CMS system I work mostly on implementing websites: Dynamicweb CMS started to offer Razor based templates.
That opened up a lot of possibilities when implementing templates.

HTML based templates

Dynamicweb CMS is like other CMS systems a website tool which lets you create content and then render it using templates.

So if the editor creates a header containing say “I love my CMS” that bit of data could be shown on the website for instance as a header like this, using HTML based template:

<h1><!--@ParagraphHeader--></h1>

That is just great! Whatever the editor chooses to put into his paragraphheader field in the backend of the CMS, it will be shown as a H1.

This approach works, but is very limited – you cannot do any logic when rendering the content. Since Dynamicweb had choosen the path of comment based tags, they had to stay on that path. So for instance they added comment based IF tags like this:

<!--@If(ParagraphHeader<contains>"sten")-->
<h1><!--@ParagraphHeader--></h1>
<!--@Else-->
<h2><!--@ParagraphHeader--></h2>
<!--@EndIf-->

So that gave me some more options to make the rendering slightly more intelligent.

Dynamicweb are good guys, so the in the aim to please all the various demands by us frontend developers, they continued to add even more features, like tag extensions. Tag extensions offers some post processing of tag content, like to do a urlEncoded() on links from the system. I could for instance do like this:

<a href="<!--@Ecom:Product:Detail.Link.UrlEncoded()-->">
See this product</a>

That may not make so much sense, but you get the point: The front end developer just got some more nice tools in his hand.

However it is impossible to know what a developer wants to do and how he wants to do it.

Razor at rescue!

Since Dynamicweb CMS is .NET based it made sense to offer the front end developer the option to use Razor. Razor is something Microsoft has created for .net so that, in a sort of modern MVC based old style “.asp” (there I said it!) fashion you could mix content with dynamic .net code.

You can simply do inline (or in more .NET style using .DLLs) .NET code. You simply do like this:

<h1>@GetGlobalValue("Global:Page.Name")</h1>

or to get current time:

The time is now: @DateTime.Now()

That is so cool! You can pull on all the resources offered and found in .net – so in theory you are no longer limited to what the CMS thinks you need! No more dirty limited IF-ELSE-ENDIF Dynamicweb specific coding! You can simply focus on becoming a good .NET developer, you can use code found anywhere on the net – as there are millions of coders out there coding in say C#.

Example: Writing custom tag extensions

However, it will take some getting used to for most front end developers – shifting from guided html based tags implementing, to coding native C#. I thought of the Dynamicweb tag extensions: If I could code my own tag extension I could let my extensions work in HTML and expose them in my own namespace.

Below you can see an example by Dynamicweb API how you can code your own tag extensions – a boilerplate, which is just what I did.

Actually at the time of writing I only made a sort of “hello world” tag extension – a tag extension silly named “sho()”. I however did something clever: I wrote the actually functionality of the tag extension in its own sort of util class. And then in the TagExtensionMethod I used the method of the util class, instead of writing it inside the tagextension method.

That left me with two ways of using the tag extension:

  1. Inside a HTML template as a “normal” tagExtension: “mytag.sho()”
  2. Inside a CSHTML (razor) template as a method! “@sho.util.sho(myvalue)”

Now that is cool, as old-style front end developers can stick with the html domain specific “.sho()” and more modern frontend developers could use it as any other .net based method, simply by including my namespace.

I will here give you a taste of my under construction code, eat it raw and be inspired! :-)

using System;
using Dynamicweb;
using Dynamicweb.Rendering;
using Dynamicweb.Extensibility;

namespace sho
{
public class util
{
public static string sho (string value)
{
return value.Replace ( _);
}
}

//AddInName is the name of the extension method  <!@DwPageName.sho(12)>
// will give an AddInName of sho
// page name.sho() => page_name
[AddInName (sho)]
public class TagExtensionMethodSample : TagExtensionMethod
{
public override string ExecuteMethod (string value)
{
object fullPassedArgument = this.Argument;
return sho.util.sho (value);
}
}
}

Links

US

Leave a Reply