Thursday 30 January 2014

Displaying Links list with links and content using Ecma Script Client Object Model

ExecuteOrDelayUntilScriptLoaded(getVideos, "sp.js");

function oncListQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

var linksCollection;
var currentcontext;
var folderURL='';
var listLinks;
var listLinkRoot;


function getVideos() {
 
    //load site
    currentcontext = new SP.ClientContext.get_current();
    listLinks = currentcontext.get_web().get_lists().getByTitle('Project Link');
    listLinkRoot = listLinks.get_rootFolder();

    var camlQuery = new SP.CamlQuery();

    //get list item by project ID
    camlQuery.set_viewXml('<View><RowLimit>1000</RowLimit></View>');

    linksCollection = listLinks.getItems(camlQuery);
   
    currentcontext.load(listLinks, 'Title', 'Id');
    currentcontext.load(listLinkRoot);

    currentcontext.load(linksCollection, 'Include(ID,Title, URL, Modified)');
    currentcontext.executeQueryAsync(Function.createDelegate(this, getVideosResult), Function.createDelegate(this, oncListQueryFailed));
}

function getVideosResult() {
    //re-create JQ Grid container
    $("#divVideosHolder").html('<div id=\'tblAllVideosPager\'></div><div id=\'divAllVideos\'></div>');
   
    var listID = listLinks.get_id();
    var listURL = listLinkRoot.get_serverRelativeUrl();

    //Split by comma
    var hashes = listURL.split('Lists');
   
    var itemAddURL = hashes[0] + "Lists/Project%20Link/NewForm.aspx" ;

    var listItemEnumerator = linksCollection.getEnumerator();
    var html = "";
    html = html + "<table id='tblAllVideos' border='0' cellspacing ='0' cellpadding='0'>";
    html = html + "<thead><tr><th>Type</th><th>Title</th><th>Modified</th></tr></thead><tbody>";

    //loop the items
    while (listItemEnumerator.moveNext()) {

        //current item
        this.oListItem = listItemEnumerator.get_current();

        //get item details
        var itemOpenURL;
        var linkTitle = oListItem.get_item('Title');
        var linkURL = oListItem.get_item('URL').get_url();
        var linkDate = oListItem.get_item('Modified');
       
        //var values = fileURL.split('Project');
        //itemOpenURL=values[0] + 'Project Link' + '/Forms/DispForm.aspx?ID=' + oListItem.get_item('ID');

        var fileImageURL = "/_layouts/Images/IC" + "gen" + ".gif";

        var fileDateNew = (linkDate.getMonth() + 1) + "/" + linkDate.getDate() + "/" + linkDate.getFullYear();

        html = html + "<tr><td style='text-align:center;'><img src='" + fileImageURL + "' / ></td><td>";
        html = html + "<a target='_blank'  href='" + linkURL + "' >" + linkTitle + "</a></td><td><nobr> " + fileDateNew + "</nobr></td></tr>";
    }

    html = html + "</tbody></table>";
    document.getElementById("divAllVideos").innerHTML = html;


    tableToGrid('#tblAllVideos',
                        { colNames: ['Type', 'Title', 'Modified'],
                            colModel: [
                        { name: 'Type', index: 'Type', width: 70 },
                        { name: 'Title', index: 'Title' , width: 200 },
                            //{name:'Date', index:'Date',formatter: formatDateTime},
                        {name: 'Modified', index: 'Modified', width: 80 }
                    ], 
                            width:  '100%',
                            height: 190,
                            pager: '#tblAllVideosPager',
                            caption: "<table cellspacing='0' cellpadding='0' width='100%'><tr><td style='width:75%'></td><td style='width:25%';padding-top:5px;'><a href='"+itemAddURL+"' title='add link' ><img src='https://mcf1.sharepoint.com/sites/roost/siteAssets/images/plus.png'   style='cursor:pointer;height:10px;width:10px;text-decoration:none'/ > </a><a class='AddNew' href='"+listURL+"' target='_blank' style='cursor:pointer;margin-left:10px;margin-right:10px;text-decoration:none;'><span class='AddNew'>View All</span></a></td></tr></table>",
                            rowNum: 8,
                            ignoreCase: true,
                            altRows: true,
                            altclass:'myAltRowClass',
                            paging: true,
                            emptyrecords: "No Links",
                            viewrecords: true,
                            loadonce: true
                        });

    $("#tblAllVideos").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
   
    //For paging
    $("#tblAllVideos").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");

}

No comments:

Post a Comment