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”).”
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.
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”.
Add the tiles html and the two Xsl List View web parts we created(pictureLibrary,CustomList) to the PlaceHolderMain.
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.
Deploy the project,add some pictures and couple of item to the lists
and We’re done .
Here’s The final result:
the full project. See u next time.