SharePoint 2013: Create a Metro Live Tile using MetroJS, JsRender and the new REST API

August 11, 2012

Hi guys,

One of the biggest changes made in SharePoint 2013 is the UI. And of course I’m talking about The Metro UI Style.

image

We see it ,feel it and interact with it since Microsoft introduced Windows phone 7. and later on in Windows 8 etc…

As stated on Wikipedia “A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics (“content before chrome”).”

More and more websites are adopting the Metro UI Style, web sites like www.microsoft.com, www.touchality.com and www.mykindofphone.com. more examples you can find here.

We will focus on the Metro Live Tile. I decided to create a custom Live Tile using JavaScript library that Drew Greenwell has created based on the Windows Metro Style , JsRender library that provides a template-based rendering that works great with JSON and the new SharePoint 2013 REST API that really makes our development experience much more easier with CRUD operation using OData and REST web technologies.

It’s worth pointing out that SharePoint 2013 has the option to create tiles but I didn’t find a way doing it programmatically. Nevertheless it will be a good practice for us to play a little bit with the JavaScript libraries and the new REST API as i mentioned before.

In our example we’ll create two tiles that read data from two lists, first tile shows the pictures from the picture library and the second tile show items from a list.

Let’s Begin Smile

1) We will work with VS2012 . open vs2012 create a new project,choose Apps then App for SharePoint 2013 and call it “MetroStyleApp”.

image

2) Create new folder and call it Lists, then add two lists,the first is a custom list, call it “CustomList” and the second is picture library, call it “pictureLibrary”.

image

3) Add three JavaScript files, Jquery 1.7.2metroJS and JsRender to the Scripts folder, and MetroJs.css file to the Content folder.

image

4) Add the JavaScript and the css reference to PlaceHolderAdditionalPageHead in the Default.aspx

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>

     <script type="text/javascript" src="../Scripts/MetroJs.js"></script>

     <script type="text/javascript" src="../Scripts/jsrender.js"></script>

    <!-- Add your CSS styles to the following file -->

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

     <link rel="Stylesheet" type="text/css" href="../Content/MetroJs.css" />

    <!-- Add your JavaScript to the following file -->

    <script type="text/javascript" src="../Scripts/App.js"></script>

Add the tiles html and the two Xsl List View web parts we created(pictureLibrary,CustomList) to the PlaceHolderMain.

<!-- Apply blue theme as default for all tiles -->

h1>Live Tiles Example</h1>

div class="tiles red">

  <div id="tile1" class="live-tile" data-initdelay="4500" data-delay="2500" data-mode="flip">

       <div><p>This will be replaced with items from the hidden &lt;ul&gt; with the class'itemsSource'

          <span class="tile-title">First Tile</span>

          </p>

       </div>

       <div>

           <p>

               item content will be here

           </p>

       </div>

   </div>

   <!-- im using a ul here, but this pattern can be used with div, p, span etc. -->

   <ul class="itemsSource">


   </ul>


   <div id="tile2" class="live-tile blue" data-direction="horizontal" data-initdelay="500" data-delay="3000">

       <div class="customList">


       </div>

       <div>

           <img class="full" src=http://www.drewgreenwell.com/content/images/sample/1tw.gif alt="first" />

       <span class="tile-title">back title</span>

       </div>

   </div>


    <!-- Green Static Tile -->

   <div class="green live-tile">

       <span class="tile-title">static tile (figure 2d)</span>

       <p>Static tiles can take advantage of theming too!</p>

   </div>

/div>  <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" >

WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart2" runat="server" ListUrl="Lists/pictureLibrary" IsIncluded="True" NoDefaultStyle='TRUE' Title='pictureLibrary' PageType='PAGE_NORMALVIEW' Default='False' ViewContentTypeId='0x'>

/WebPartPages:XsltListViewWebPart>


WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart1" runat="server" ListUrl="Lists/CustomList" IsIncluded="True" NoDefaultStyle='TRUE' Title='CustomList' PageType='PAGE_NORMALVIEW' Default='False' ViewContentTypeId='0x'>

/WebPartPages:XsltListViewWebPart>


       </WebPartPages:WebPartZone>

5)Add this Code to the app.js file. in this code you can see two REST API calls,

first is to get all urls from the picture library and their ‘created’ date.second is to get all the items from our custom list.another thing you can see here is the two templates we created for each ajax call. and of course the cool use of the metroJS library.


function sharePointReady() {

    requestPictureLibraryListItems();

    requestCustomListItems();


    $(".green live-tile").liveTile();

}

function requestPictureLibraryListItems()

{

    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('pictureLibrary')/items?$select=EncodedAbsUrl,Created";

    jqxhr = $.getJSON(url, null, pictureDataReturned);

    jqxhr.error(onError);

}

function requestCustomListItems() {

    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('CustomList')/items?$select=Title";

    jqxhr = $.getJSON(url, null, customDataReturned);

    jqxhr.error(onError);

}

function pictureDataReturned(data)

{

    $(".itemsSource").css("display","none");

    var dataResults = data.d.results;

    $.templates("picturesTemplate", "<li><img class='full' src='{{:EncodedAbsUrl}}'</><span class='tile-title'>Created:{{:Created}}</span></li>");

    $(".itemsSource").append(renderPictureTemplate(dataResults));

    //get the first item from the list

    var $item = $(".itemsSource>li").first();

    //set the back tile to have content of the first item by default

    $("#tile1>div").last().html($item.html());

    //set up tile

    $("#tile1").liveTile({

        pauseOnHover: true,

        animationComplete: function (tileData, $front, $back) {

            //get the next item from the list or the first

            $item = $item.next("li");

            if ($item.length == 0)

                $item = $(".itemsSource>li").first();

            $back.html($item.html());


        }

    });

}

function customDataReturned(data) {

    var dataResults = data.d.results;

    $.templates("customListTemplate", "<p>{{:Title}}</p>");

    $(".customList").append(renderCustomTemplate(dataResults));

    $("#tile2").liveTile(

        {

            mode: 'flip',

            //choose images randomly from the array

            backIsRandom: true

        }

    );


}

function renderPictureTemplate(data) {

    var html;

    html = $.render.picturesTemplate(data);

      return html;

}

function renderCustomTemplate(data) {

    var html;

       html = $.render.customListTemplate(data);


       return html;

}

function onError(error) {

    alert("error:"+JSON.stringify(error));

}


Deploy the project,add some pictures and couple of item to the lists
 and We’re done Smile.

Here’s The final result:

image

Download

the full project. See u next time.


Add comment
facebook linkedin twitter email

Leave a Reply to Ackerman Cancel Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

33 comments

  1. choroshinSeptember 23, 2012 ב 22:07

    Hi Bogan,
    thanks for your comment.
    it nice to know that people like my posts 🙂

    Reply
  2. Mano MangaldasOctober 14, 2012 ב 18:44

    Hi Alex,

    It is easy to create a custom tile programmatically using SharePoint API. You will need to create your Webpart inheriting from TilesViewWebpart. Here is a sample of the same .. http://www.howtosp.com/blog/2012/10/14/sharepoint-2013-create-a-metro-live-tile-programmatically/

    Reply
  3. OliphantNovember 30, 2012 ב 10:52

    Hey there! Wonderful stuff, please do tell us if you
    post again something similar!

    Reply
  4. RashmiDecember 13, 2012 ב 22:34

    I am unable to get Picture Library item in VS 2012 but it is available in OOTB for the site….What am i missing 🙁

    Reply
  5. RatliffDecember 15, 2012 ב 11:36

    Because a Newbie, I am always hunting on that the internet for articles that can
    help me. Thank you

    Reply
  6. choroshinDecember 18, 2012 ב 18:10

    Hi Rashmi,
    Are you talking about Picture library on the site or on your app site?

    Reply
  7. Amal FernandoDecember 19, 2012 ב 9:02

    Good Post

    Reply
  8. FaulknerDecember 22, 2012 ב 1:08

    Sometimes it can be safer to just take a step back and understand that not everybody shares your beliefs

    Reply
  9. PinoDecember 22, 2012 ב 15:28

    Definitely believe that which you stated.
    Your favorite reason seemed to be on line that the easiest thing to be aware of.
    I say to you, I certainly figure out annoyed while people consider worries that they
    plainly don’t recognize about. You managed to hit that the nail
    upon the top and also defined out the whole thing without having side
    effect , people can take a signal. Will probably be back to obtain more.

    Thanks

    Reply
  10. BorenDecember 22, 2012 ב 18:50

    Thanks for this post, I am a big fan of this website would along the
    lines of to go on updated.

    Reply
  11. ForbesDecember 28, 2012 ב 18:16

    Thanks for this first-rate article. One other thing is that lots of digital cameras come equipped with the zoom
    lens that enables more or less of your scene to look for included by system of ‘zooming’ in and out.
    All these changes in concentration length are
    normally reflected while in the viewfinder and on significant display screen right at that the back of that the specific camera.

    Reply
  12. FalcoJanuary 14, 2013 ב 2:22

    Hi Alex,
    good article! What do you think about this Solution?
    http://msscorner.de/en/2013/01/14/erstellen-einer-modern-ui-tile-app-fur-sharepoint-2013/
    This article describes nearly the same like yours. But I think the tiles looks more like SharePoint.

    Reply
  13. choroshinJanuary 15, 2013 ב 18:07

    Hi Falco,
    I loved you article.
    Keep the good work.

    Reply
  14. ReynaJanuary 25, 2013 ב 5:16

    Thanks for finally talking about >SharePoint 2013:
    Create a Metro Live Tile using MetroJS, JsRender and the new
    REST API – Choroshin Alex Reply

  15. <a href="http://www.uninstalltips.com">uninstall</a>February 18, 2013 ב 6:12

    uinstall any software db215b834d47b47764f0469c4c2a9aa5

    Reply
  16. ChristianFebruary 23, 2013 ב 4:43

    Asking questions are really fastidious thing if you are not understanding anything
    completely, except this article offers pleasant understanding yet.

    Reply
  17. AlfonsoFebruary 25, 2013 ב 17:32

    Thank you for your blog post. Velupe and I happen to be
    saving for our new ebook on this topic and your writing has made us to save
    the dough. Your notions actually answered all our concerns.
    In fact, over what we had acknowledged prior to when we came across
    your amazing blog. I actually no longer nurture doubts along with a troubled
    mind because you truly attended to all of our needs right here.
    Thanks

    Reply
  18. AckermanMarch 1, 2013 ב 9:41

    Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your next post thank you once again.

    Reply
  19. ArnoldMarch 1, 2013 ב 17:07

    Everything is very open with a clear description
    of the issues. It was truly informative. Your site is very
    helpful. Thank you for sharing!

    Reply
  20. LawsMarch 9, 2013 ב 7:10

    Thank you for sharing your info. I truly appreciate your efforts and I am waiting for your further write ups
    thanks once again.

    Reply
  21. ShorterMarch 20, 2013 ב 14:55

    What platform and theme have been you using if I may ask?
    Where can I buy them? .

    Reply
  22. BeaneMarch 22, 2013 ב 13:13

    You made some decent points there. I looked on that the internet for any other issue and found most individuals goes in
    addition to with all your website.

    Reply
  23. HoppeMarch 25, 2013 ב 18:29

    Hiya, have you ever in your life thought about to create about
    Nintendo or PS handheld?

    Reply
  24. SnellApril 25, 2013 ב 5:25

    Wow, superb blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of
    your site is great, let alone the content!

    Reply
  25. LangeMay 9, 2013 ב 8:34

    I do not even know how I ended up here, but I thought this
    post was good. I don’t know who you are but definitely you are going to a famous blogger if you are not already 😉 Cheers!

    Reply
  26. MusserMay 16, 2013 ב 23:59

    I was able to find good advice from your content.

    Reply
  27. KeelerMay 18, 2013 ב 6:15

    This solution is efficient and effective.

    Reply
  28. RalphAugust 13, 2013 ב 11:42

    Hey, I think your site might be having browser compatibility issues.
    When I look at your blog in Ie, it looks fine but
    when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, awesome blog!

    Reply
  29. MckeeAugust 29, 2013 ב 17:32

    This site was… how do I say it? Relevant!!
    Finally I have found something that helped me.
    Thanks a lot!

    Reply
  30. otodkd@gmail.comSeptember 10, 2013 ב 12:22

    wow, awesome blog article.Really looking forward to read more. Awesome.

    Reply
  31. OpivivygepnagNovember 15, 2013 ב 11:21

    1C7IC7 Really appreciate you sharing this blog article.Thanks Again. Awesome.

    Reply
  32. RajDecember 30, 2015 ב 12:30

    Hi
    Can you please let me know how to achieve multilevel tiles functionality in same wey programmatically.

    I have to display child tiles on mouse-over of parent tiles.

    Reply