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

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.

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.

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.

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.

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.

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 

Download Source