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
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:-
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)
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 code is pretty simple, it just tells to format the contact card details and images etc.
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:-
Below is the HTML code.
- 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.
- CSS folder structure looks something similar to image below.
Hope this helps someone in need. Comments/Suggestions welcomed J