7 YEARS AGO

Hierarchical viewers and transformations

Last month I posted my first look at the upcoming Kentico CMS 6.0. One interesting new feature is the hierarchical viewers. With Kentico CMS 6.0 site administrators will have to ability to create hierarchical listings of content without having to use nested repeaters. New web parts like the hierarchical viewer and the universal viewer will makes this a piece of cake. This post will show you how the hierarchical viewer web part works.

Last month I posted my first look at the upcoming Kentico CMS 6.0. One interesting new feature is the hierarchical viewers. With Kentico CMS 6.0 site administrators will have to ability to create hierarchical listings of content without having to use nested repeaters. New web parts like the hierarchical viewer and the universal viewer will makes this a piece of cake. This post will show you how the hierarchical viewer web part works.

Let's start with creating the hierarchy in the content tree. I added a product features page with two products as child documents. Each product contains one ore more files and a frequently asked question. The following screenshot illustrates this:

content_tree.png

Next up let us add the "Hierarchical viewer" web part to the product features page. In the web part properties dialog: select the path ./% (all documents under the current path), choose the document types CMS.File, CMS.Product and CMS.FAQ and create a new hierarchical transformation called CMS.Product.Hierarchical_list.
 
web_part.png

Create a new item transformation for each selected document type:

CMS.FAQ.Hierarchical_item:
<p><%# Eval("FAQQuestion") %> -> <%# StripTags(Eval("FAQAnswer")) %></p>
CMS.File.Hierarchical_item:
<p>download: <a target="_blank" href="<%# GetFileUrl("FileAttachment") %>"><%# Eval("FileName") %></a></p>
CMS.Product.Hierarchical_item:
<pre><h3><%# GetDocumentLink() %></h3></pre>

The transformations will appear within the earlier created transformation CMS.Product.Hierarchical_list:

transformation.png

Go to the live site and open the product features page. The result will be similar to the following screenshot:

result.png

And there you have it, no more need for complex transformations and nested repeaters.

Note: I tried to make it more fancier by creating header and separator transformations. It seems that this functionality was not added in the 6.0 CTP.