+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Enhancing Widget Templates with Client Side Libraries

by Peter Marinov
Users have become more and more demanding in terms of user interface characteristics. To address that ever-increasing hunger for more fluid user experience akin to a desktop applications, browsers have evolved to adopt more and more powerful JavaScript libraries and HTML5 based elements. Sitefinity has many tools in its arsenal to facilitate the use of client side frameworks and libraries for delivering rich user experience.

With this blog post the goal is to demonstrate just one of the many ways in Sitefinity to enrich the user experience with JavaScript libraries. We are going to utilize Sitefinity Thunder for widget templates modifications. Since the mark-up of all the widgets is based on templates, let’s see how we can leverage that in conjunction with Sitefinity Thunder. The sample will rely on Kendo UI, but using the same approach you can use any other JavaScript based client side library.

Define the goal

As a developer, I want to create a KendoUI enhanced news widget template to display the news items in a PanelBar mode.

Getting Started

A few months ago, we introduced Sitefinity Thunder. As part of the tool, developers and designers are presented with a really easy and familiar way to tweak the markup of the different Sitefinity widgets . Sitefinity Thunder is a Visual Studio plug-in that enables developers comfortable with the MS Visual Studio 2010 + to easily customize and configure Sitefinity via familiar programming instead of relying solely on hardcore skills.

One of the features that adds extra functionality for designers is the support for all the templates for any dynamic module built with the module builder. First you need to connect your Sitefinity Thunder to the Sitefinity project you want to modify. For all who are new to this tool, here is a short video that demonstrates the process of connecting to Sitefinity through Visual Studio.

The next step: in Sitefinity Explorer you should locate the widget template you want to modify. For the purpose of this demonstration, I will select the “Titles only” template for the News widget and duplicate it.

image

I will name the new template “PanelBarList” and open it. Below is the markup of the template:

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
<LayoutTemplate>
<sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>
<ul class="sfnewsList sfnewsListTitlesOnly">
<asp:PlaceHolder ID="ItemsContainer" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="sfnewsListItem">
<sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" ToolTipDataField="Description" runat="server" />
<sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>
</li>
</ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>

A quick look at the template and the sample available on the documentation page of the Kendo.UI.PanelBar, gives us the directions of the required HTML mark-up. In essence, we will only need a named <ul> element, with child <li> elements to hold the news items. The existing template already provides us with the needed structure, so we would just need to adapt it to our needs.

Prepare the markup

Our goal will be to have a structure similar to this one:

<ul id="panel">
<li>NewsItem1_Heading<div>NewsItem1_Content</div></li>
<li>NewsItem2_Heading<div>NewsItem2_Content</div></li>
...
...
...
<li>NewsItemN_Heading<div>NewsItemN_Content</div></li>
</
ul>

 

IntelliSense Support in Visual Studio

To follow the structure of the Kendo PanelBar, we can actually insert all kind on content within the div container of the widget. Sitefinity Thunder is not just a passive connector to our Sitefinity project. The tool also targets developers productivity by adding utilities like IntelliSense support for content properties and CSS classes. Using the <%#Eval(“ statement, we receive instant access to all static and dynamic properties of the corresponding content type (in our case NewsItem)

PrintScreen2

 

Then we will just need to call the “kendoPanelBar” method on the <ul> element, so let’s do it.

Insert the script

Inserting the script is  actually very easy. We can just insert our code into a  <script type="text/javascript">{Our script here}</script> tag

<script type="text/javascript">
$(document).ready(function () {
$("#panel").kendoPanelBar({
expandMode: "single"
});
});
</script>

Reference the resources

Last but not least, we need to make sure all the needed JavaScript and CSS resources to support the client side functionality. All samples like jQuery rotators, UI widgets have comprehensive tutorials on what needs to be included. Kendo UI also provides us with step by step instructions. We will need jQuery as a dependency library in addition to two CSS files.

Using standard html declarations, I can provide references to the resources I need. In my case I will reference CDN located resources, but you can reference local resources as well. Since I already have jquery n my parent template, I will omit this.

<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.silver.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js" type="text/javascript"></script>

Putting the pieces together

With all that being said, it is time to just save the ready template and upload it to the live website. The latter task will be automatically accomplished by Sitefinity Thunder, so for us is just a matter of applying the new template to any news widget and enjoy the results. Pretty cool, isn’t it?



Looking Ahead

With the recent release of Sitefinity Thunder, incorporating client side libraries has become very natural and easy task for any ASP.NET developer. Emphasizing on standard technologies and simplicity, we offer new and exiting way to achieve any JavaScript enabled template in a powerful and yet easy way. Please share your feed-back and questions so to provide this thread with even more useful information.

Leave a comment