The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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.
As a developer, I want to create a KendoUI enhanced news widget template to display the news items in a PanelBar mode.
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.
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.
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>
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)
Then we will just need to call the “kendoPanelBar” method on the <ul> element, so let’s do it.
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>
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>
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?
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.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.