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.
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 
1) We will work with VS2012 . open vs2012 create a new project,choose Apps then App for SharePoint 2013 and call it “MetroStyleApp”.
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”.
3) Add three JavaScript files, Jquery 1.7.2, metroJS and JsRender to the Scripts folder, and MetroJs.css file to the Content folder.
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 <ul> 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 .
Here’s The final result:
Download
the full project. See u next time.
Hi Bogan,
thanks for your comment.
it nice to know that people like my posts 🙂
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/
It is remarkable, this valuable message
Hey there! Wonderful stuff, please do tell us if you
post again something similar!
I am unable to get Picture Library item in VS 2012 but it is available in OOTB for the site….What am i missing 🙁
Because a Newbie, I am always hunting on that the internet for articles that can
help me. Thank you
Hi Rashmi,
Are you talking about Picture library on the site or on your app site?
Good Post
Sometimes it can be safer to just take a step back and understand that not everybody shares your beliefs
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
Thanks for this post, I am a big fan of this website would along the
lines of to go on updated.
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.
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.
Hi Falco,
I loved you article.
Keep the good work.
Thanks for finally talking about >SharePoint 2013:
Create a Metro Live Tile using MetroJS, JsRender and the new
REST API – Choroshin Alex
uinstall any software db215b834d47b47764f0469c4c2a9aa5
Asking questions are really fastidious thing if you are not understanding anything
completely, except this article offers pleasant understanding yet.
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
Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your next post thank you once again.
Everything is very open with a clear description
of the issues. It was truly informative. Your site is very
helpful. Thank you for sharing!
Thank you for sharing your info. I truly appreciate your efforts and I am waiting for your further write ups
thanks once again.
What platform and theme have been you using if I may ask?
Where can I buy them? .
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.
Hiya, have you ever in your life thought about to create about
Nintendo or PS handheld?
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!
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!
I was able to find good advice from your content.
This solution is efficient and effective.
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!
This site was… how do I say it? Relevant!!
Finally I have found something that helped me.
Thanks a lot!
wow, awesome blog article.Really looking forward to read more. Awesome.
1C7IC7 Really appreciate you sharing this blog article.Thanks Again. Awesome.
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.