REST and SharePoint 2010 Quick Start Guide: Sample Browser Client with JQuery

 

Table of Contents for this Series

This time I construct a simple browser client (IE8 in my case) that takes a SharePoint library’s raw XML and converts it to something somewhat decent looking within the browser. A more comprehensive treatment of these technologies can be found here – http://msdn.microsoft.com/en-us/sharepoint/ee513147.aspx . The intent here is to cut through some of the chatter (albeit, good chatter) and get to work.

.NET ==> WCF ==> WCF Data Services (was ADO.NET Data Services) ==> REST (oData / ListData.svc) ==> SharePoint 2010 Services

The CTP for ado.net data services targets the Microsoft .NET Framework 3.5 SP1 with regard to ListData.svc

Of course, REST also manifests within the MVC framework but takes a different route through the .net technology stack related to building asp.net applications (sans web form technology). Don’t be confused.    

Ok, JavaScript can really suck at times – especially without the robust tools enjoyed by hardcore .NET/Java developers. However, JQuery makes building REST friendly applications a compelling and fun alternative when the requirements are small and well defined. In this case, building out some simple functionality from SharePoint 2010.

By the way, if you look in C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14ISAPI you will see the following WCF service files

image 

You will note ListData.svc, I’ll have more to say about the others as I move through my REST posts. 

Ok, getting down to business. I start with a SharePoint 2010 picture library (I called Company Research Group) and added a few items as follows (images courtesy of bing.com image search)

image

We can now use REST to return data on these scientists as shown in my previous post.

The actual REST call begins with http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup/  

*BEWARE* spaces in the library name are automatically removed from the URL

 

Here are the actual results

 

image 

…and if you filter on one entry, http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup?$filter=(Title eq ‘Richard Feynman’) you will see

image   

This is not an RSS feed from SharePoint 2010 since we are using the ListData.svc as our access vehicle. Although it displays like an RSS feed.

To see the actual XML itself (within IE 8) go into Internet options

image

Then “Feeds and Web Slices”

image

Uncheck “Turn on feed reading view” as shown above. Then you will see the generated XML, example below

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://win-dcbei0i59th/_vti_bin/ListData.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
  <title type="text">CompanyResearchGroup</title>
  <id>http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup</id>
  <updated>2009-12-29T07:44:59Z</updated>
  <link rel="self" title="CompanyResearchGroup" href="CompanyResearchGroup" />
  <entry m:etag="W/&quot;4&quot;">
    <id>http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup(1)</id>
    <title type="text">Albert Einstein</title>
    <updated>2009-12-28T20:26:54-08:00</updated>
    <author>
      <name />
    </author>
    <link m:etag="&quot;{0DCCE5A8-E8A2-45C5-88E0-1AB50B8C940B},5&quot;" rel="edit-media" title="CompanyResearchGroupItem" href="CompanyResearchGroup(1)/$value" />
    <link rel="edit" title="CompanyResearchGroupItem" href="CompanyResearchGroup(1)" />
    <category term="Microsoft.SharePoint.DataService.CompanyResearchGroupItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="image/jpeg" src="http://win-dcbei0i59th/Company%20Research%20Group/Albert%20Einstein.jpg" />
    <m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
      <d:ContentTypeID>0x010102006C6459D2775D0E4BB92F21FC544106DF</d:ContentTypeID>
      <d:Name>Albert Einstein.jpg</d:Name>
      <d:Title>Albert Einstein</d:Title>
      <d:PictureWidth m:type="Edm.Int32">128</d:PictureWidth>
      <d:PictureHeight m:type="Edm.Int32">160</d:PictureHeight>
      <d:DatePictureTaken m:type="Edm.DateTime" m:null="true"></d:DatePictureTaken>
      <d:Description m:null="true"></d:Description>
      <d:ID m:type="Edm.Int32">1</d:ID>
      <d:ContentType>Picture</d:ContentType>
      <d:Created m:type="Edm.DateTime">2009-12-28T20:24:24</d:Created>
      <d:CreatedByID m:type="Edm.Int32">1</d:CreatedByID>
      <d:Modified m:type="Edm.DateTime">2009-12-28T20:26:54</d:Modified>
      <d:ModifiedByID m:type="Edm.Int32">1</d:ModifiedByID>
      <d:CopySource m:null="true"></d:CopySource>
      <d:ApprovalStatus>0</d:ApprovalStatus>
      <d:Path>/Company Research Group</d:Path>
      <d:CheckedOutToID m:type="Edm.Int32" m:null="true"></d:CheckedOutToID>
      <d:VirusStatus>5445</d:VirusStatus>
      <d:IsCurrentVersion m:type="Edm.Boolean">true</d:IsCurrentVersion>
      <d:Owshiddenversion m:type="Edm.Int32">4</d:Owshiddenversion>
      <d:Version>1.0</d:Version>
    </m:properties>
  </entry>

Building a browser client with JQuery + HTML,

The browser client code uses the JQuery library hosted by Microsoft see http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

As of this post I do not know if JQuery is planned to be hosted (as yet anyways) within SharePoint 2010. In any event the script tag I’m using is

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js&quot; type="text/javascript"></script>

The code I plan to use revolves around the JSON extensions for JQuery, see http://docs.jquery.com/Ajax/jQuery.getJSON

Here is my raw JQuery code (simple minded but works)

<html>
<head>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

    $.getJSON("http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup",function(data) {

            var count = 0;
            $.each(data.d.results, function(i,result) {
                var src = result.__metadata.media_src;
                var title = result.Title;
                html = "<table border=’0′ style=’float: left’>
                <tr><td style=’color:blue’>" + title +"</td></tr>
                <tr><td><img src=’" + src + "’ width=’150′ height=’150’/></td></tr>
                </table>";

                $(‘#resultarea’).append($(html));
            });

     });

});

</script>

</head>
<body>
   <div id="resultarea">
   </div>
</body>
</html>

The unfiltered URL results with http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup

image

Of course, this post was not intended to create a web client with any bells and whistles, just a quick demo of using REST and JQuery to pull data from SharePoint 2010. The actual web page does nothing more than the original SharePoint display but you can see the power in our hands I’m sure.

A vulnerability using GET has been identified when returning JSON data, as explained by Phil Haack in this post http://haacked.com/archive/2009/06/25/json-hijacking.aspx. I don’t think this matters as much for known/secured/trusted intranet environments as such. 

That’s all for now

Cheers!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s