Using list service to display data in sharepoint site page

Leave a comment


Situation: Need to display a set of data in sharepoint list based on a dropdown in the page. For that if we plan to write a visualwebpart. But while changing the values in the dropdown Postbacks will occur which will be not smooth.

To handle this is in a simple way we can use 1) Ajax 2) List service.

Here I will explain with List service.

1) Create a Sharepoint list “EmployeeList”

2) The list service will be accessed as: http://abc:123/_vti_bin/ListData.svc/EmployeeList (This is an example)

3)Now we need to create a new page in Sitepages.

4) In that new page insert a Content Editor  Web Part (CEWP)

5) Now Open a Notepad and write your Jquery code and save it as Employee.JS and give a reference in the new page created.

Point to remember: You must place the js reference link only in between the PlaceHolderAdditionalPageHead. nOT ONLY .JS  we can refer .css files also in PlaceHolderAdditionalPageHead.

<asp:Content ContentPlaceHolderId=”PlaceHolderAdditionalPageHead” runat=”server”>

<script type=”text/javascript” src=”/SitePages/employee.js”></script>

</asp:Content

6) After referencing write a code in employee.js to retrieve all the list data and show them or render it in a tabular form

7) employee.js

$(document).ready(function() {

var url=” http://abc:123/_vti_bin/ListData.svc/EmployeeList ” ;

$.getJSON(url,function(data) {
var count = 0;
html= “<table>”;
$.each(data.d.results, function(i,result) {
if(result.Employee!=null)
{
var title = result.Title;
var emp=result.Employee;
var empid=result.EMPID;
if(count==0)
{
html+=”<tr><th><b>Employee</b></th><th><span><b>EMPID</b></th></tr><tr><td><b>”+emp+”</b></td><td><span><b>”+empid+”</b></td></tr>”;

html+=”</div>”;
}

else

{

//dont need headers again here

html+=”<tr><td><b>”+emp+”</b></td><td><span><b>”+empid+”</b></td></tr>”;

}

count = count +1;

}

});
html+=”</tr>”;
html+=”</table>”;
$(‘#Result’).append($(html));

});

8) now we need a content editor webpart to render our html output. here we given according to jquery with a div

<div id=”Result” style=”font-size: 10px; color: blue”></div>

9)take a text file and copy above html code and link that with content editor webpart

10) Then in browser it will render all table data

Suppose if you want filter data with some specific value you must give list service url as like this:

http://abc:123/_vti_bin/ListData.svc/EmployeeList?$filter=EMPID eq ‘1234’ ”

References:

https://msdn.microsoft.com/en-us/library/lists%28v=office.12%29.aspx

Advertisements

The type or namespace name ‘DataContract’ could not be found (are you missing a using directive or an assembly reference?

Leave a comment


just add:

add System.Runtime.Serialization in references

%d bloggers like this: