Thursday, November 7, 2013

Implement live tile navigation for SharePoint lists in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Implement-4dc68bf1
http://www.ashokraja.me/post/Metro-UI-style-Live-Tiles-Web-Part-with-Metro-JS-and-jQuery-in-SharePoint-2013.aspx
https://www.nothingbutsharepoint.com/sites/devwiki/articles/pages/sharepoint-2013-create-a-metro-live-tile-using-metrojs-jsrender-and-the-new-rest-api.aspx

vs2012 -> file -> new -> project c# -> office/SharePoint -> apps -> apps for SharePoint 2013 -> "SP_SharePointTileNavigator_js"
SP_SharePointTileNavigator_js -> Right Click -> Add -> New Item -> Select List Template 
Like this create three custom Lists namely List1, List2, List3
Click on 'Add' Button
Click on 'Finish' Button

SP_SharePointTileNavigator_js -> Images -> Add -> Existing Item -> "MetroPlay.png"

SP_SharePointTileNavigator_js -> Pages -> Default.aspx
add below div code to "PlaceHolderMain" place holder tag
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    <div id="tileArea" style="width: 600px;"></div>
</asp:Content>

SP_SharePointTileNavigator_js -> Scripts -> App.js 
Add below javascript code to App.js file

'use strict';
var context;
var lists;
var listItems;
var tileArea;
var context = SP.ClientContext.get_current();
var web = context.get_web();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    getUserName();
    lists = context.get_web().get_lists();
    context.load(lists);
    context.executeQueryAsync(function () { renderListTiles(); }, function () { errorLoadingLists(); });
});
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}
function errorLoadingLists() {
    tileArea = document.getElementById("tileArea");
    while (tileArea.hasChildNodes()) {
        tileArea.removeChild(tileArea.lastChild);
    }
    var errMessage = document.createElement("div");
    errMessage.appendChild(document.createTextNode("Lists could not be retrieved."));
}
function renderListTiles() {
    var listEnumerator = lists.getEnumerator();
    tileArea = document.getElementById("tileArea");
    while (listEnumerator.moveNext()) {
        var list = listEnumerator.get_current();
        var listTitle = list.get_title();
        if ((listTitle == "List1") || (listTitle == "List2") || (listTitle == "List3")) {
            var itemCount = list.get_itemCount();
            var tile = document.createElement("a");
            tile.setAttribute("class", "tile");
            tile.setAttribute("href", "../Lists/" + listTitle);
            tile.appendChild(document.createTextNode(listTitle));
            tileArea.appendChild(tile);
            var tileBody = document.createElement("div");
            tileBody.setAttribute("class", "tileNumber");
            tileBody.appendChild(document.createTextNode(itemCount.toString()));
            tile.appendChild(tileBody);
        }
    }
}

SP_SharePointTileNavigator_js -> Content -> App.cs
Add below css to App.cs file
.tile{
    width:150px;
    height:150px;
    color:#FFFFFF;
    margin-top:5px;
    margin-left:0px;
    margin-right:10px;
    margin-bottom:10px;
    cursor:pointer;
    padding:5px;
    float:left;
    text-align:right;
    font-family:Segoe UI, sans-serif;
    font-size:14px;
    background-image:url(../images/MetroPlay.png);
    background-repeat: no-repeat;
    background-position:bottom right;
    background-color:#FFAAAA;
}
.tileNumber{
    text-align:center;
    font-family:Segoe UI Light, sans-serif;
    font-size:72px;
    margin-top:10px;
    margin-bottom:10px;
}
a, a:hover, a:visited {text-decoration:none; outline:none;color:#FFFFFF}

a:active, a:focus {outline:0}

SP_SharePointTileNavigator_js -> Right Click -> Deploy 
Thank You.

No comments:

Post a Comment

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts