Monday 6 July 2015

Display Other site collection List data in current site collection using Client object modal.

A very bad dream in SharePoint 2013 is to "Display Other site collection List data in current site collection" as SharePoint Designer 2013 has deprecated data view web part and content search web part does not give look and feel as we wanted. It might be simple but I will update my self and this blog if I get success in near future with it.

Here is the sample code to display data from other site collection:

1) You need to add a web part page.  Add a "Content Editor Web part " in this page. In this paste below code with your changes.

<div>
   <!-- Table -->
  <table id="docsTable">
    <thead>
    <tr>
<th>ID</th>
<th>Title</th>
<th>Modified</th>
</tr>
</thead>
  </table>
</div>


<script language="javascript" type="text/javascript">
$(document).ready()
{
var folderUrl = document.getElementById('folderpath').value;
var url =document.getElementById('sitepath').value +"/_api/Web/GetFolderByServerRelativeUrl('" + folderUrl + "')?$expand=Folders,Files";


 // Get Folders and Files in single call. You can try using ajax call too. I have tried it but I was forced to call method multiple time.

$.getJSON(url,function(data,status,xhr){

 // Get Folders

    for(var i = 0; i < data.Folders.length;i++){      
        $('<tr>').append(
        $('<td>').html("data.Folders[i].ID"), // Append ID
        $('<td>').html("<a href='"+data.Folders[i].ServerRelativeUrl+"' target='_blank'>"+data.Folders[i].Name+"</a>"), // Apend Name. Click redirect to specific Item
        $('<td>').text(data.Folders[i].TimeLastModified.substring(0, 10))).appendTo('#docsTable'); //Append modified date.
    }

 // Get Files

    for(var i = 0; i < data.Files.length;i++){      
        $('<tr>').append(
        $('<td>').html("data.Files[i].ID"),  // Append ID
        $('<td>').html("<a href='"+data.Files[i].ServerRelativeUrl+"' target='_blank'>"+data.Files[i].Name+"</a>"), // Apend Name. Click redirect to specific Item
        $('<td>').text(data.Files[i].TimeLastModified.substring(0, 10))).appendTo('#docsTable');//Append modified date.
    }
})

}

This is a sample code. You can Add some more functionality like paging, sorting or can change fields as per your need.

No comments:

Post a Comment