Metro UI style Live Tiles Web Part with Metro JS and jQuery in SharePoint 2013

Ashok Raja
 
Solutions Architect
December 28, 2012
 
Rate this article
 
Views
1187

In this article we can see how to create a Metro UI style live tiles web part in SharePoint 2013 and SharePoint 2010. This web part is based on Metro JS, one of the popular open source jQuery plugin for Metro UI based UI rendering.

Metro Live

The above image is the final out put of Metro UI Live Tiles Web Part which consists of images, navigation links and text information. To accommodate this, I have created a SharePoint custom list named as Metro Tiles with the below columns.

Sl.NoColumn NameColumn Type
1TitleSingle line of text
2ImageUrlHyperlink or Picture (Image)
3NavigationUrlHyperlink or Picture (Hyperlink)
4OpenInNewWindowYes/No
5TileColorSingle line of text

Since I have used the four tiles option of Metro Js, I have added four images to the Images library and four list items  to the Metro Tiles list as shown below.

Image List

MetroTiles

Now create a new Visual studio project and add a new visual web part named as MetroLiveTiles. Download jQuery and Metro Js and include it into the project. I have created a module in Visual Studio named as MetroJs to provision these files into a SharePoint folder named as MetroJs inside Style Library List. The below is the project structure after including the necessary files.

vs

Open the ascx file of Visual Web Part and add the below code. In this visual web part I have added a Repeater control and have bound the data in the format required by Metro Js. I have split the Image Url and Navigation Url while binding the data as SharePoint renders URL field values as link separated by description text with a comma.

 <div class="list-tile">
     <ul class="flip-list fourTiles" data-mode="flip-list">
         <asp:Repeater ID="Repeater1" runat="server">
             <ItemTemplate>
                 <li>
                     <div>
                         <a href="<%# DataBinder.Eval(Container.DataItem, "NavigationUrl").ToString().Split(',')[0] %>" target="<%# DataBinder.Eval(Container.DataItem, "OpenInNewWindow").ToString()=="1"?"_blank":"_self" %>">
                             <img src="<%# DataBinder.Eval(Container.DataItem, "ImageUrl").ToString().Split(',')[0] %>"
                                 class="full" alt="Tile" />
                         </a>
                     </div>
                     <div style='background-color: <%# DataBinder.Eval(Container.DataItem, "TileColor") %>;'>
                         <strong>
                             <%# DataBinder.Eval(Container.DataItem, "Title") %></strong>
                     </div>
                 </li>
             </ItemTemplate>
         </asp:Repeater>
     </ul>
 </div>
 <script type="text/javascript">
     $(document).ready(function () {
         $(".flip-list").liveTile();
     });
 </script>

Open the .cs file of Visual web part and paste the below code which performs the data binding.

Note: Since it is a four tiles live web part, just ensure that you are binding only four items to the Data Repeater. Metro Js has support for 9 tiles too. To have a nine tiles live tile webpart change the class of ul from flip-list fourTiles to flip-list nineTiles and bind nine records. I have not restricted the row count for this demonstration as I have added only 4 items.

Csharp Source

 private const string ListName = "Metro Tiles";
 protected override void OnInit(EventArgs e)
 {
     base.OnInit(e);
     InitializeControl();
 }
 
 protected void Page_Load(object sender, EventArgs e)
 {
     if (!this.Page.IsPostBack)
         BindData();
 }
 
 private void BindData()
 {
     SPWeb web = SPContext.Current.Web;
     SPList list = web.Lists[ListName];
     DataTable Dt = list.Items.GetDataTable();
     Repeater1.DataSource = Dt;
     Repeater1.DataBind();
 }
 
       
 
 protected override void Render(System.Web.UI.HtmlTextWriter writer)
 {
     writer.Write(BindScript("/style library/metrojs/jquery-1.8.3.min.js", true));
     writer.Write(BindScript("/style library/metrojs/MetroJs.js", true));
     writer.Write(BindStyle("/Style Library/metrojs/MetroJs.css", true));
     base.Render(writer);
 }
 
 private string BindStyle(string StyleUrl, bool PickFromSiteCollection)
 {
     if (PickFromSiteCollection)
         StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, StyleUrl);
     else
         StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, StyleUrl);
 
     return string.Format(@"<link rel=""stylesheet"" href=""{0}"" type=""text/css"" />", StyleUrl);
 }
 
 private string BindScript(string ScriptUrl, bool PickFromSiteCollection)
 {
     if (PickFromSiteCollection)
         ScriptUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, ScriptUrl);
     else
         ScriptUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, ScriptUrl);
 
     return string.Format(@"<script type=""text/javascript"" src=""{0}""></script>", ScriptUrl);
 }

Note: This post contains source code for both SharePoint 2010 and SharePoint 2013. Enjoy  Smile

Download Source

Author Info

Ashok Raja
 
Solutions Architect
 
Rate this article
 
I am Ashok Raja, Share Point Consultant and Architect based out of Chennai, India. ...read more
 

Leave a comment