My Sharepoint World: SharePoint Custom List

Get Items from SharePoint List and display in SharePoint using Content Editor Web Part and HTML table

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Refer here to understand about SPServices. This is specialized Jquery to execute SharePoint related operations.

Step 3: Refer here to understand more about SPServices.GetListItems.

Step 4: In a Web Part Page, Edit Page and Add Content Editor Web Part.

Step 5: Create a custom List and populate with records.

Step 6: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to content editor web part or Write code in Web Part's text editor directly.

<html>
<head>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery.SPServices-0.7.2.min.js"></SCRIPT>
<title>Contents from MycustomList</title>
</head>

<body>

<td><B>Department</B></td>

<td><B>Project</B></td>

</tr>

</table>

get() ;

function get()

{

var method = "GetListItems";

var webURL = $().SPServices.SPGetCurrentSite() ;

var list = "MyCustomList";

var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";

var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";

$().SPServices

({

operation: method,

async: false,

webURL: webURL,

listName: list,

CAMLViewFields: "<ViewFields Properties='True' />",

CAMLQuery: query,

completefunc: function (xData, Status)

{

$(xData.responseXML).SPFilterNode("z:row").each(function()

{

var ID = $(this).attr("ows_ID");

var title = $(this).attr("ows_Title");

var Dept = $(this).attr("ows_Department");

var Project = $(this).attr("ows_Project");

var EndDate = $(this).attr("ows_End_x0020_Date");

$("#myDataTable").append("<tr align='middle'>" +

"<td align='left'>"+ID+"</td>" +

"<td align='left'>"+ title+"</td>" +

"<td align='left'>"+ Dept+"</td>" +

"<td align='left'>"+ Project+"</td>" +

"<td align='left'>"+ EndDate+"</td>" + "</tr>");

});

}

});

};

</script>

</body>

</html>

Step 7: If you need to remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Leave your comments below.