GetListItems code generator example

Oct 24, 2011 at 4:24 PM
Edited Oct 24, 2011 at 4:26 PM

Hi,

I recently had to produce a fairly large number of unique calls to "GetListItems". Instead of crafting them individually and constantly cursing my bad typing I whipped up a code generator which would produce the necessary SPServices goodness with a few clicks of the mouse. Perhaps this can be of use to someone else.

What does it do: It produces the code necessary for a "GetListItems" call based on a few clicks of the mouse.

Installation:

  • Dump the code below into an HTML file on SharePoint. 
  • Adjust the source URL's for your jQuery and SPServices libs & save the file
  • Open the file in any browser.

Usage

  • Set the "Input URL" to whatever location you like
  • Select a list from the selection box
  • Select a set of columns from the resulting list of checkboxes.
  • Click "Get results"
  • use the results wherever you need em.

Enjoy.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.SPServices-0.6.2.js"></script>

<SCRIPT type=text/javascript>

$(document).ready(function() {
	waitMessage = "<img style='display:block; margin-left:auto; margin-right:auto;' src='/_layouts/images/gears_an.gif'/>";
	$("form").submit(function(e) {e.preventDefault()});
	$('#inputURL').change(function() {
		//obtain the site's URL inputURL value
		$().SPServices({
			operation: "WebUrlFromPageUrl",
			async: false,
			pageURL: $("#inputURL").val(),
			completefunc: function (xData, Status) {$('#siteURL').html($(xData.responseXML).find("WebUrlFromPageUrlResult").text())}
		})
		getSiteLists($('#siteURL').text());
	});
	$('#ListSlct').change(function(){
		$("#colSlct").html(waitMessage);
		$().SPServices({
			operation: "GetList",
			webURL: $('#siteURL').text(),
			listName: this.value,
			async: false,
			completefunc: function (xData, Status){
				var outputHTML = "<table><tr>";
				$(xData.responseXML).find("Fields>Field").each(function(index) {
					if ((index%4)==0) {outputHTML += "</tr><tr>"};
					outputHTML +="<td><input type=\"checkbox\" name=\"column\" value="+ $(this).attr("Name") +" />"+ $(this).attr("DisplayName") +"</td>";
				});
				outputHTML += "</tr></table>";
				$("#colSlct").html(outputHTML);
			}
		})
	});
	$('#getSatisfaction').click(function(){
		var qryCAML = "<ViewFields>";
		var tableResult = "<tr>";
		$('input:checkbox:checked').each(function(){
			qryCAML += "<FieldRef Name=\\\""+ this.value+"\\\" />";
			tableResult += "<td>\"+$(this).attr(\"ows_"+ this.value+"\")+\"</td>";
		})
		qryCAML += "</ViewFields>";
		tableResult += "</tr>";
		var resultCode = "";
		resultCode += "$().SPServices({";
		resultCode += "\n\toperation: \"GetListItems\",";
		resultCode += "\n\tasync: false,";
		resultCode += "\n\tlistName: \""+$('#ListSlct').val()+"\",";
		resultCode += "\n\twebURL: \""+$('#siteURL').text()+"\",";
		resultCode += "\n\tCAMLViewFields: \""+qryCAML +"\",";
		resultCode += "\n\tcompletefunc: function (xData, Status) {";
		resultCode += "\n\t\tvar htmlTable = \"<table>\";";
		resultCode += "\n\t\t$(xData.responseXML).find(\"[nodeName='z:row']\").each(function() {";
		resultCode += "\n\t\t\thtmlTable += \""+tableResult +"\";";
		resultCode += "\n\t\t})";
		resultCode += "\n\thtmlTable += \"</table>\";";			
		resultCode += "\n\treturn htmlTable;";
		resultCode += "\n\t}";
		resultCode += "\n})";
		$('#results').html("<textarea id=\"resultsCode\" rows=\"20\">"+resultCode+"</textarea>");
	});
	//load the default site
	$("#inputURL").trigger('change').val(location.href);
});

function getSiteLists(tURL){
	$("#ListSlct").html("<option>Loading...</option>");
	$().SPServices({
		operation: "SiteDataGetListCollection",
		webURL: tURL,
		completefunc: function(xData, Status){
			//renderList(xData, Status)
			$("#ListSlct").html("<option>Select a site list...</option>");
			$(xData.responseXML).find("_sList").each(function() {
				$("#ListSlct").append("<option>" + $("Title",this).text() + "</option>");
			});
		}
	});	
}

</script>
<style>
	.sSet {
		min-width: 35em;
		margin-bottom:1em;
		border:	1px Gray solid;
		padding: 0.2em;
	}
	.dimmed {
		color:silver;
	}	
	#inputURL, #ListSlct {
		min-width: 35em;
	}
	label {
	    width: 5em;
	    float: left;
	    margin: 2px 4px 6px 4px;
	    text-align: right;
	    position:relative;
	}
	br { clear: left; }
	#resultsCode {width: 100%;}

</style>

<title>SharePoint data viewer</title>
</head>

<body>
	<h1>SharePoint data viewer</h1>
	<form>
		<div class="sSet">
			<label>Input URL:</label><input id="inputURL" type="text" /><br />
			<label>Site URL:</label><span id="siteURL" class="dimmed"></span><br />
		</div>
		<div class="sSet">
			<label>List:</label><select id="ListSlct"></select>
		</div>
		List Items:
		<div class="sSet" id="colSlct">
			<span class="dimmed">Awaiting selection...</span>
		</div>
		<input type="button" id="getSatisfaction" value="Get results"/><br /><br />
		Result code:
		<div id="results">Nothing here yet...
		</div>
	</form>
</body>

</html>
Nov 1, 2011 at 6:59 PM

This looks great, but I am unable to use.  I have replaced your jQuery and SPServices calls to our internal, but perhaps I am entering the wrong Input URL - does this work with managed site collections?

 

Ours is of the format http://idnet/sites/sitename/default.aspx - what should I enter in the Input URL?  Also, I see you are using a later version of SPServices than we are - what version is the minimum?

Thanks so much!

Oct 15, 2012 at 12:47 PM

Look good. But I also have trouble getting it to work.

I've set the input value correctly.

It keeps throwing an "object not found error" on the first $document.ready line.

Help?

Coordinator
Oct 15, 2012 at 2:24 PM

Your references to the .js files must be wrong. Check them and make sure that the files are loading in the browser.

M.

Oct 15, 2012 at 3:39 PM
Edited Oct 15, 2012 at 5:04 PM

Ah, thanks very much. 

I jumped the gun there and didn't do my debugging and just assumed this wasn't working.

I see that the code is supposed to dump a table of all the columns. This doesn't seem to work. 

I'm pointing to an asset library with images in. Would this make the difference? The selection list is empty.

--Update:

I've added some debugging into the script above. It appears that in the area where it is supposed to populate the <table> with the list of checkboxes, it's failing with a SharePoint error 'List does not exist'. This is happening to every list.

This is the debug code:

//debug
var out = $().SPServices.SPDebugXMLHttpResult({
			node: xData.responseXML
			}); 
$("#WSOutput").html("").append("<b>This is the output from the GetList operation:</b>" + out);
//end debug

 

Oct 15, 2012 at 5:05 PM
NisusMage wrote:

Ah, thanks very much. 

I jumped the gun there and didn't do my debugging and just assumed this wasn't working.

I see that the code is supposed to dump a table of all the columns. This doesn't seem to work. 

I'm pointing to an asset library with images in. Would this make the difference? The selection list is empty.

--Update:

I've added some debugging into the script above. It appears that in the area where it is supposed to populate the <table> with the list of checkboxes, it's failing with a SharePoint error 'List does not exist'. This is happening to every list.

This is the debug code:

//debug
var out = $().SPServices.SPDebugXMLHttpResult({
			node: xData.responseXML
			}); 
$("#WSOutput").html("").append("<b>This is the output from the GetList operation:</b>" + out);
//end debug

 

Okay solved the SAGA.

I've changed the "this.value" code to the follow. Note the commented out bit.

operation: "GetList",
webURL: $('#siteURL').text(),
listName: $('#ListSlct').val(), //this.value,
async: false,

Coordinator
Oct 15, 2012 at 5:27 PM

This is a really great example, Alfred, and I just did a blog post about it and added a page to my demo site with a slightly modified version of it.

If you arrive here and want to use this, be sure to check it out, as Alfred's example won't work with more current versions of jQuery and SPServices.

M.