Dreaweaver templating in Tridion
Unless we are familiar with XSLT, I believe, most of us would prefer developing Dreamweaver TBB (DWT) for CT/PT layout!
So just thought of sharing basic Dreamweaver syntax which are commonly used anyway. There are few Dreamweaver extensions are available, developed by Tridion Community, to simplify and enhance DWT templating. But I didn’t get a chance to work on these extensions. So below code syntax would work without any DWT extensions.
I’ve created few simple building blocks for this DWT example.
Schema & Component
Below is the sample content created based on a simple schema. So assume that component will have this below content.
<Blog xmlns="uuid:18db19ea-b584-4f97-9ac6-8a6e269c9f60"> <Author> <Name>Thotta</Name> <TwitterHandle>thotta</TwitterHandle> <Genere>Tamil</Genere> </Author> <Title>TwiTamils</Title> <Body>This post is to discuss about active twitters.</Body> <Tweeters> <Name>Sathish</Name> <TwitterHandle>sathm</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Nuno</Name> <TwitterHandle>nunolinhares</TwitterHandle> <Genere>Tridion</Genere> </Tweeters> <Tweeters> <Name>Sowbarnika</Name> <TwitterHandle>sowmi_</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Srinivasan</Name> <TwitterHandle>DKCBE</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Alvin Reyes</Name> <TwitterHandle>Nivlong</TwitterHandle> <Genere>Tridion</Genere> </Tweeters> </Blog>
And the component layout is defined in DWT as follows
<div>
<h1>@@Component.Fields.Title@@</h1>
by <a href="twitter.com/@@Component.Fields.Author.TwitterHandle@@">@@Component.Fields.Author.Name@@</a>
@@Component.Fields.Body@@
<hr />
<table border="1">
<tr>
<td><strong><span style="text-decoration: underline;">Tweeters</span></strong></td>
<td><strong><span style="text-decoration: underline;">Tamil Tweeters</span></strong></td>
</tr>
<tr>
<td>
<ul>
<li><strong><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></strong></li>
</ul>
<ul>
<li><em><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></em></li>
</ul>
</td>
<td>
<ul>
<li><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></li>
</ul>
</td>
</tr>
</table>
</div>
Using template builder, we would need to execute this component template against the above component and that would render the output as,
TwiTamils
by
Thotta
This post is to discuss about active twitters.
| Tweeters | Tamil Tweeters |
Accessing a field value
There are many ways to retrieve the field of a component : @@Component.Fields.<field name>@@ or @@<field name>@@ or ${field name}.
Calling simply the field name, like @@Title@@, would work but we should be clear that the same field name was not used on CT/PT level. Otherwise it would return title of the component template since Title is the default attribute for Component Template also.
It’s always better to use full path like @@Component.Fields.Title@@.
Accessing sub field’s value
If embedded schema’s field needs to be accessed, we can extend the call by adding the sub field name.
As you can see in the above component xml source of a component, Name is the sub field of Author. So it can be accessed like
@@Component.Fields.Author.Name@@
Accessing a value from Collection
If there are any collection of fields, that can be looped using TemplateBeginRepeat. In the above content, Tweeters is the collection , the sub fields can be accessed inside the loop.
<!-- TemplateBeginRepeat name="Component.Fields.Tweeters" --> Name: @@Name@@ Handle : @@TwitterHandle@@ <!-- TemplateEndRepeat -->
Please note that the sub fields cannot be called like Component.Fields.Tweeters.Name as it cannot navigate right through the Component.
I wish to have something like Component.Fields.Tweeters[0].Name … Component.Fields.Tweeters[3].Name… but unfortunately, it won’t work 
Getting loop index
When we are iterating a collection, obviously we would require to have an index of the loop. Unlike other languages, we can’t declare any variables here but Dreamweaver provides a default variable (TemplateRepeatIndex) which holds the index value of the loop.
@@ TemplateRepeatIndex@@ -> this will print the index value on the page.
Conditional loop
Dreamweaver also provides conditional loop which is similar to If conditions in other languages.
<!-- TemplateBeginIf cond="conditions" --> …. <!-- TemplateEndIf -->
For example,
If I want to render a footer component on bottom of the page, we can try something like
<!-- TemplateBeginRepeat name="Components" -->
<!-- TemplateBeginIf cond="ComponentTemplate.Metadata.Position = 'Footer'" -->
@@RenderComponentPresentation(Component.ID, ComponentTemplate.ID)@@
<!-- TemplateEndIf -->
<!-- TemplateEndRepeat -->
Hope this helps for beginners!
