jQuery : SharePoint Contact Card Web Part


Overview

I am back with another jQuery MagicJ. Whenever I was browsing through any social networking site I used to love those beautiful Contact List or Friends list. It was somewhere in the back of my mind to build something like this for our friend SharePoint. Today I got the opportunity to build some fancy (or not so fancy) contact card based on jQuery and SharePoint web services.

The best part of SharePoint is that gives you all the basic infrastructure for your day to day data requirements like Contact List, Task List, Calendar list and so on and once we have place to store such data jQuery gives you the power to read it and present it in the desired format.

Here also I tried something like that and came up with this solution for display contact list data in the card format.

Download the Code

Please download the source code and required files from : SudhirKe.jqContactCard.Source.zip in case the google docs link does not work you can download the code from my GitHub repository.

 

Prerequisites…

Default contact list from SharePoint. This solution also requires following files:-

– jQuery 1.4.3 [Note: jQuery1.5 is not compatible with SPServices yet.]

– jQuery UI 1.5.9

– jQuery SPServices

– jQuery UI Theme (I have used ui-lightness)

Apart from this I have developed following files:-

– jContactCard.css

– jContactCard.js

If you want to display the person image you can add a image field and get it link to your contact pictures. Other way is to read it from MySite, I have implemented a very basic solution and displayed the default image from SharePoint “/_layouts/images/no_pic.gif” with each contact.

See it in Action…

Here is the screen shot of the web part. Moving the mouse over a contact card highlights the contact card (thanks to jQuery UI J)

The Solution

I am really sorry for pasting the code as images, but it was getting formatted really badly by WordPress. Anyways I have given the link to download the code.

CSS File

CSS code is pretty simple, it just tells to format the contact card details and images etc.

jQuery Code

It’s very simple like my previous posts. I am using the SPServices solution from CodePlex to read data from SharePoint contact list. Very thanks to Marc D Anderson. Marc you have made huge differences to the life of jQuery and SharePoint and jQuery SharePoint lovers like us.

So the jQuery code is very oblivious, I am calling SharePoint lists web services using SPServices. I have called “processResult” method in the end to parse and format the return values. Below is the code to call the web service:-

Note: The below code can be found in the jContactCard.js file in the code.

My processResult method looks something like below:-

HTML Code

The required HTML script is really simple, the magical part is already taken care by jQuery all your html needs is a div element with “result” as id. Of course you need to add reference to the required JavaScript and CSS files.

Below is the HTML code.

Note: Please make sure to update the references of the JavaScript and CSS files when you upload it onto SharePoint document library.

Deployment

– Upload all the JS and CSS file along with the HTML file onto SharePoint document library.

– Add a content editor web part and add link of the myjQuery.html file in the Content Link property.

– Below is the folder structure.

– JS folder contains required all the JavaScript files.

– CSS folder structure looks something similar to image below.

Hope this helps someone in need. Comments/Suggestions welcomed J

Advertisements

Updating URL field using Lists.asmx


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://&gt;,<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