jQuery : SharePoint Contact Card Web Part

Posted on Updated on


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

About these ads

9 thoughts on “jQuery : SharePoint Contact Card Web Part

    Ann said:
    August 22, 2011 at 3:34 pm

    This Contact Card web part is exactly I am looking for. I am unable to download the source code for this Contact Card web part. It says the page I required is not availble. Could you let me know anywhere else I can download the code? Thanks.

    Ann

      Sudhir Kesharwani responded:
      August 24, 2011 at 7:02 am

      Ann,

      The link is still valid, anyhways I have sent you the code as email attachment.

      Hope you find it helpfull. Let me know if you need any help.

      - sudhir

    Matt Fishman said:
    October 4, 2011 at 1:36 pm

    This is awesome, but I’m also unable to download from the google docs link. Would you be able to send the code to me as well?

      Sudhir Kesharwani responded:
      October 5, 2011 at 2:12 pm

      Matt,

      Sent you the source code. Let me know if you need anything.

      Sudhir

    Sudhir Kesharwani responded:
    October 19, 2011 at 2:47 pm

    Alternate download location for source code https://github.com/sudhirke/jQuery-Shared

    cypher19 said:
    June 29, 2012 at 11:13 am

    Dear Sudhir,
    Eager to use this, but unsure how to implement it… Not using MySites nor profiles, i have only a list of employees. I’ve put all the files in a DocLib, created a Content Editor with link to myjQuery, but what to do then? Any advise in the following steps to take?
    Thx!

      Sudhir Kesharwani responded:
      June 29, 2012 at 2:33 pm

      Frank,

      I am not at all using MySite or User Profiles for this implementation. All the user details is being stored in SharePoint Contacts list. You should not have any issues in implementing the Contact Card if you follow step by step instruction given in my article.

      Following are some good references to start with jQuery & SharePoint development:-

      You may also want to take a look at my earlier posts related to jQuery.

      Hope this helps you to enter the exciting world of jQuery :)

      Feel free to contact me in case you need any help.

      Regards,
      Sudhir

        cypher19 said:
        June 29, 2012 at 3:14 pm

        Sudhir,
        Thanks for the reply! I am also using a list of contacts. What i seem to miss in your instructions, is how to get that list connected with the Content Editor (linked to jQuery).
        I am excited about jQuery but sofar only used it in websites, not SharePoint.
        Kind regards!

        Sudhir Kesharwani responded:
        June 29, 2012 at 6:14 pm

        Frank,

        If you look at the jQuery Code section of my article, this section contains the code where in we are calling SharePoint web services to get the Contacts Information from SharePoint lists.

        I am using SPServices solution from Marc D Anderson, this library does the job of connecting to SharePoint, we just have to provide the SharePoint site URL as property.

        Please download the source code from https://github.com/sudhirke/jQuery-Shared

        Hope this helps.

        Regards,
        Sudhir

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s