Sudhir Kesharwani: SharePoint Web Services

Updating URL field using SharePoint Lists Web Service (Lists.asmx)

One thing that I always complain about SharePoint 2007 web service is lack of documentation and samples. This is the most neglected areas of SharePoint 2007. I hope this have been improved in SharePoint 2010 especially since Microsoft has added a lot of new web services.

I had been working on a jQuery based SharePoint solution to display a modal popup to all the visitors. Apart from displaying the jQuery pop up dialogue on page load, I also had to record the history about visitor.

I had to update the list items using Lists.asmx UpdateListItems() method.

My custom list had following fields:-

Field Name	Type	Description
Title	Text	This field is used to record the login name of logged in user
URL	URL	This field is used to store the link of a text file hosted on server.

After struggling for some time I found that updating the URL field requires some additional attention, since the SharePoint URL field value consists of two parts <URL>, <Description>. Even when working with Object Modal we have to use SPUrlFieldValue.

Please make sure to follow these guidelines while updating the URL field through web services.

- Please notice that URL needs to include “http://” e.g. http://www.google.com/, generally we write http://www.google.com/ and think that SharePoint should be intelligent enough to append http, but this is not the case.

- The other thing is that we need to make sure to include a space between the comma (,) and description. So our URL field value needs to have <URL including http://>,<SPACE><Description>, e.g. http://www.google.com/, Google.

Please pay extra attention while updating/Reading the URL field (through Web Service or thorough object modal).

Here is how the element should look in your soap envelope.

<Field Name=”URL”>http:\\www.google.com, Google</Field>

Here is my soap envelop for calling the UpdateListItems() method. I have omitted the other parts of calling the web service for clarity. (You get lots of examples through Google)

// The SOAP Envelope

var soapEnv =

"<?xml version=\"1.0\" encoding=\"utf-8\"?> \

<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \

xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \

xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \

<soap:Body> \

<UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \

<listName>Audit</listName> \

<updates> \

<Batch OnError=\"Continue\"> \

<Method ID=\"1\" Cmd=\"New\"> \

<Field Name=\"Title\">Some Text</Field> \

<Field Name=\"URL\">http://www.google.com, Google</Field> \

</Method> \

</Batch>

</updates> \

</UpdateListItems> \

</soap:Body> \

</soap:Envelope>";

Hope this helps someone in need J

Regards,
Sudhir Kesharwani
MCTS - MOSS 2007 | MCTS - WSS 3.0 | MCPD-EA | MCSD.NET

The Annoucements Carousel
Your web part should look like following image (announcements.jpg). You will see all the announcements scrolling one by one, Announcement items are linked to the actual announcement page. When you hover the mouse pointer over a news item, the scrolling will stop automatically.

Note: All the required files can be downloaded from
https://docs.google.com/leaf?id=0B1XvO-SvpjhGYWEyYzNhYTYtZTQ5MS00MGRkLTk2ZmYtYTkwZmNlZDAxNmE2&hl=en.
Code is pasted in the email body for reference.

Overview

Recently I have been working on jQuery Carousel plug in and SharePoint. Accidently/fortunately I was able to develop an announcement carousel solution. I thought of posting this to the broader audience. I find this really useful as we can show all the announcements in the smaller area.

Prerequisites

Make sure you have an announcements list in your SharePoint site with some sample announcements.

Step 1 – Required JavaScript and CSS file.

Following files are required for this carousel functionality.

- jQuery library – jQuery 1.4.1 library, you can download it from the jQuery site. I love to rename it to jQuery-latest.min.js. I have used jQuery-1.4.2.min.js

- jCarousel script –I have updated the original jCarousel script for hoverPause functionality as per the comments given in the plug in page. Make sure to use the same.

- News-Ticker-Source.js – this file contains the actual source code to query the announcements links and making it carousel. Make sure to replace {Site Url} with your site url.

- News-ticker.css - Contains style sheet for the announcements list.

The folder structure that I followed in my site is as following, highlighted the folders in the hierarchy.

- Shared Documents

o BIN

§ JQLIB – this folder contains all the JavaScript files

· jQuery-latest.js

· jcarousellite_1.0.1.hoverPause.js

· news-ticker-source.js

§ CSS - this folder contains folder for the style sheet and required images

· News-ticker : Folder for the style sheet.

o Images: folder for images

§ News1.jpg

§ Mic1.jpg

o News-ticker.css : CSS filefor styling.

Note: I have given this folder structure since my code has all the references based on this folder structure, however you can have your own folder structure; make sure to update the references in the HTML script and news-ticker-source.js files.

Step 2 – The JavaScript Code

All the required files are attached with this email. Still thought of putting the code of news-ticker-source.js on to this post.

$(document).ready(function()

{

//Call the method to read data from annoucements list and display it as carousel.

GetAnnoucementData();

});

This function reads the data from annoucement list and passes the control to processResults method

This makes and ajax call to lists.asmx web service.

Make sure to replace {Site URL} with your SharePoint site url.

function GetAnnoucementData()

{

//Prepare the SOAP envelop for calling GetListItems method from lists.asmx web service

var soapEnv = "<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='ows_ID' /> \

<FieldRef Name='LinkTitleNoMenu' /> \

<FieldRef Name='Body' /> \

<FieldRef Name='Expires' /> \

<FieldRef Name='Author' /> \

</ViewFields> \

</viewFields> \

</GetListItems> \

</soapenv:Body> \

</soapenv:Envelope>";

/*Post the request envelop to web service thorugh ajax request and pass the results to processResults method*/

$.ajax({

url: "{SITE URL}/_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

complete: processResult,

contentType: "text/xml; charset=\"utf-8\""

});

}

/* This method parses the resultant xml and prepares the display.

Please replace {Site Url} with your sharepont site url.

function processResult(xData, status)

{

//Select the root element.

var newnews =$("#newsItems");

var rows;

//Check if query returns no rows

if (xData.responseXML.getElementsByTagName("z:row").length==0)

{

//Prepare the display for 0 rows.

var url = "{SITE URL}/Lists/Announcements/";

var head = "<li><div class='thumbnail'> <img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg'></div>";

var body = "<div class='info'>No news items<a href=" + url + "> Read all</a> <span class='cat'> no items found</span></div>";

var tail = "<div class='clear'></div></li>";

var liHtml = head + body + tail;

//Append the HTML element to newNews element

newnews.append(liHtml);

}

else

{

//Read all the rows from responseXml

rows = xData.responseXML.getElementsByTagName("z:row");

jQuery(rows).each(function()

{

//Read the information from returned rows

var url = "{SITE URL}/Lists/Announcements/DispForm.aspx?ID=" + $(this).attr("ows_ID");

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

var news = $(this).attr("ows_Body");

var author = $(this).attr("ows_Author");

author = author.split('#')[1];

//Prepare the div element

var head = "<li><div class='thumbnail'><img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg'></div>";

var body = "<div class='info'><a href=" + url + ">" + $(this).attr("ows_Title")+ "</a> <span class='cat'>by " + author + "</span></div>";

var tail = "<div class='clear'></div></li>";

var liHtml = head + body + tail;

//Append the resultant element onto newNews element

newnews.append(liHtml);

});

}

//Append entire newNews element to root Div

newnews.appendTo(".newsticker-jcarousellite");

//Prepare the Carousel of all the returned items

$(".newsticker-jcarousellite").jCarouselLite({

vertical: true,

hoverPause: true,

visible: 4,

auto:500,

speed:1000

});

}

Step 3 – The HTML Script

Add a content editor web part on your home page and add following HTML Script in the source editor. (Make sure to update the references of script and css files, replace {SITE URL} with your site url).

</ul>

</div>

References

- http://sorgalla.com/jcarousel/

- http://weblogs.asp.net/jan/archive/2009/05/06/querying-sharepoint-list-items-using-jquery.aspx

Regards, Sudhir Kesharwani MCTS - MOSS 2007 | MCTS - WSS 3.0 | MCPD-EA | MCSD.NET

Sudhir Kesharwani

Wednesday, June 9, 2010

Updating URL field using Lists.asmx

Friday, May 14, 2010

jQuery - Announcement carousel for SharePoint

MCPD - EA

MCTS