How can I export the contents of a list to a html table?
I know how to extract the elements of a list using CAML Queries, but how do I generate a html table containing the elements dynamically?
asked Apr 7, 2015 at 10:43
-
You have some libraries that can help you doing it easily, like the mentionned below SPServices. You also have SharepointPlus that I've created (aymkdn.github.io/SharepointPlus).– AymKdnApr 8, 2015 at 9:15
Add a comment
|
3 Answers
You can use SPServices jQuery Library and CAML query to get data from a SharePoint List and display that retrieved data in Content Editor Web Part where you would write your html table code.
To learn more about SPServices refer this: SPServices CodePlex
Before writing the below code in Content Editor Web Part make sure you download jquery-1.4.2.min.js from https://code.jquery.com/jquery/ and SPServices library from http://spservices.codeplex.com/releases/view/119578 and upload both in a document library.
In below code, "GetListItems" operation will get the list items.
Example:
<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>
</head>
<body>
<table id="myHTMLTable" border=1 width="90%" align="center">
<tr align='left'>
<td><B>ID</B></td>
<td><B>EmpName</B></td>
<td><B>JobTitle</B></td>
<td><B>Department</B></td>
</tr>
</table>
<SCRIPT type=text/javascript>
getMyListData() ;
function getMyListData()
{
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 empName = $(this).attr("ows_EmpName");
var jobtitle = $(this).attr("ows_JobTitle");
var dept = $(this).attr("ows_Department");
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+ID+"</td>" +
"<td align='left'>"+empName+"</td>" +
"<td align='left'>"+jobtitle+"</td>" +
"<td align='left'>"+dept+"</td>" +
"</tr>");
});
}
});
};
</script>
</body>
</html>
I wrote a tutorial on how this is done. http://michaelsoriano.com/sharepoint-bootstrap-using-spservices-and-jquery/
The plugin is also available in Github: https://github.com/michaelsoriano/sp-bootstrap-list-viewer
You might have to use the convert html action to convert the rich text of html type to plain text and populate the html table with it.
For the choices, it seems that is a multi select choice column and that again returns an array of selected items. So you will have initialize a string variable and then add an apply to each to the choices column and append to the string variable with the value of these choices.
Basically, you have to initialize an array variable at first for the SP items and then a string variable for the choices. Add an apply to each to loop over each SP item and then add the html to text action and pass the rich text column here. Now add another apply to each and then iterate over the choices column and in this loop add the append to string variable action to append all the multiselect values. Outside this loop add an action to append to array variable and populate the array in JSON schema like:
{
"Column Name" : "Select value from dynamic selector",
"Rich text" : "select output of rich text action",
"Multi Choices" : "select variable from dynamic content"
}
Hope this Helps!
