As part of the series of articles, we will look at retrieving some data from SharePoint.
For this example, we will look at getting data from a list, in this case a simple Announcements list, and put the data from that list into a web part on a page. (I appreciate that this could be done several other ways, but it will serve the purpose on this example)
Before doing any custom script, we will need to make a reference to the core JQuery script files. If you have access to the server, you can put the files into a convenient folder in the LAYOUTS directory, or you could upload into a document library.
To start, we will put a Content Editor Web Part onto a page. Once added, we will now add the following..
<script src=”/_layouts/examplescripts/jquery-1.3.2.js”></script>
<script language = “javascript”>
</script>
<a href="#" onclick="GetAnnouncementData()">Test</a>
<ul id="AnnouncementData"></ul>
In the above, we have a reference to the jQuery library, a script container, a link to enable us to manually test and an empty ul. (Note – don’t try clicking the link yet – we haven’t defined any functions)
The jQuery library can be downloaded from here.
Our Announcements list will contain the default Title Body and Expires columns. We will use the lists.asmx web service to retrieve data from our list, that we can then display.
To start, we will add a new function into the Content Editor part, which we will call GetAnnouncementData. The first part of the function will define the SOAP packet that gets passed to the lists.asmx service. (For full details of the options available, the details are available on MSDN
Our packet is as follows. We have defined the list name and the fields to retrieve
<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>
<soapenv:Body>
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>
<listName>Announcements</listName>
<viewFields>
<ViewFields>
<FieldRef Name='Title' />
<FieldRef Name='Body' />
<FieldRef Name='Expires' />
</ViewFields>
</viewFields>
</GetListItems>
</soapenv:Body>
</soapenv:Envelope>
Note that the bold item above is where we are defining which method form lists.asmx to use
So now our script will look as per below.
Next, we will connect to the web service. JQuery has built in functions to provide this. We will add the following to our function...
jQuery.ajax({
url: "http://mossgj/devsite/jquery/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapPacket,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
You can see from the above that we are referencing the lists.asmx web service. (you will need to change the URL to your server).
The data: soapPacket is instructing the function to pass our packet to the web service.
The complete: processResult tells the function to call another javascript function and process the data returned.
Our script will now look as below
(Note that if you try to run the script at this point, it will fail as we haven’t yet defined the processResult function)
Now we can add the function to process the result. Above our closing script tag, we will add a new function...
function processResult(xData, status) {
alert(xData.responseText);
}
This is going to read the data returned and show a message box with the complete package. If you save and close, then click you test link, you should get a message box with the complete returned data, similar to the following
Now we will read individual rows. Into the processResult function, add the following...
jQuery(xData.responseXML).find("z\\:row").each(function() {
alert($(this).attr("ows_Title"));
});
This will read each row returned and call a local function. The function will read the ows_Title attribute and get the data. After clicking our test link, we should now see a second message box with the announcement title.
Next, we are going to remove the alerts and ask jQuery to add heading to our empty ul for each announcement. Replace the alert($(this).attr("ows_Title")); for the following...
$("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#AnnouncementData");
This line is asking jQuery to append an <li> item for each row. The function is building the html and appending it to the item with an id of AnnouncementData.
The part of the function $(this) is referencing the current row returned. The .att(“ows_Title”) is reading the value of the Title field (note that the lists.asmx web service prefixes the field with ows_). Finally, the .appendTo is asking jQuery to append the html to an element with an id of AnnouncementData (see jquery selectors for detailed instructions on how to select items by title, class or id)
If you now click your test link, you should see the list item appear.
Finally, we are going to ask jQuery to do all of the above automatically, as soon as the page is ready. Just above our closing script tag we will add the following...
$(document).ready( function(){
GetAnnouncementData();
});
This jQuery function tell the page to run our GetAnnouncementData function as soon as the page is ready. After saving our content editor web part, we should now see a list of all of our announcement titles.
Obviously this is a relatively simple example. The next post will expand upon this and show how we can return a subset of data and make the things more dynamic.
Completed Content Editor Web Part source
<script src="/_layouts/novotronix/jquery/jquery-1.3.2.js"></script>
<script language = "javascript">
function GetAnnouncementData()
{
var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Announcements</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Body' /> \
<FieldRef Name='Expires' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
jQuery.ajax({
url: "http://mossgj/devsite/jquery/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapPacket,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
}
function processResult(xData, status) {
jQuery(xData.responseXML).find("z\\:row").each(function() {
$("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#AnnouncementData");
});
}
$(document).ready( function(){
GetAnnouncementData();
});
</script>
<a href="#" onclick="GetAnnouncementData()">Test</a>
<ul id="AnnouncementData"></ul>