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

jQuery Magic – Search List Web Part


Contents

  1. jQuery Magic – Search List Web Part 1
  2. Overview.
  3. Search Web Part.
  4. See it in action…..
  5. HTML Script 3
  6. Inline Style Sheet 4
  7. jQuery(fication) : Enabling the Magical Library. 4
  8. jQuery: $(document).ready() handler 5
  9. jQuery: The Search() function. 6
  10. jQuery: the processResult() function. 7
  11. References. 7
  12. Summary. 8

Overview

After being quite for sometimes now, I am back with another jQuery magic. The search list web part, this is really handy when you have some data in SharePoint that hardly gets updated, rather than opening the list we could directly add a search web part on the home page and get the data.

Search Web Part.

The search web part that we are going to see will look something similar to figure1. I have made the script to search in the Calendar list based on the event location.

Figure 1

This web part can be configured to search on any SharePoint list. Following section of this article will cover the scripts in detail.

See it in action…

I thought of showing it in action to you before we dig deeper onto the code. Follow the instruction carefully.

1. Download the required files from jQuery Magic – Search List Web Part

· jquery.highlight-latest.min.js: This is the jQuery highlight plunging. This is used to highlight the searched terms. Sincere thanks to Johann Burkard for his Highlight Plugin

· searchList.js: This contains the logic to interact with the SharePoint services and render the required controls.

2. Update the references.

3. Upload both the files onto a SharePoint document library.

4. Add a content editor web part à and update the Content Link property to point to searchList.js

Figure 2

5. Click ok and you are done. You will see the search list web part in your page.

HTML Script

Following is the HTML script that is required to render the UI of the search web part. This HTML defines following element in the web part

quickSearchTextBox: Text box to enter the query.

cmdSearch: Command button to initiate search.

resultCount: Div element to show the number of records found from query.

quickSearchResults: Div element to show the result.

I have used the SharePoint style sheet classes to format the UI look similar to SharePoint.

Inline Style Sheet

The inline style sheet classes have been used to format the output and display it in the form of block. Following are the classes in this style sheet.

– .highlight : This class is used to define formatting for highlighting the search terms in the results.

– .ul: this class is used to remove the bullets in the UL element.

– .ul li : This class is used to display the search results in the form of block.

jQuery(fication) : Enabling the Magical Library

To load the jQuery library, I have used the direct link (ajax.googleapis.com). I am not uploading the jQuery library on my SharePoint (I did that in all my previous posts).

In case you want to load jQuery from local SharePoint site you will have to upload jQuery library onto your SharePoint document library and update the SRC parameter in the following code. (Note: You will have to update the {SPURL} for jquery.highlight-latest.min.js file)

jQuery: $(document).ready() handler

$(document).ready() handler is similar to void main() in C J. This script written inside this hander is executed when the entire DOM elements have been loaded.

jQuery script should be written inside ready() handler. Please refer to jQuery Documentation to learn more about writing jQuery script.

I have used ready() handler to associate various event handlers to the controls in my web part. This contains various ways to initiate search operation and other handler to clear search result when “X” is clicked.

Note that to clear the result I have used $(selector).live() handler, this will make sure to attach event handler with “X” button only when it is present in the UI.

jQuery: The Search() function

The search function takes care of talking to the lists.asmx SharePoint web service. This function prepares the soap request with the query and processes the result.

The soap packet contains the CAML query to search the list. It defines following parameter to execute the query:

– listName : Name of the source list.

– Query : Query to execute against the list

– viewFields: Fields that should be returned in the result.

jQuery.ajax() function is used to send the request to the lists web service. The complete attribute specifies the function name that should be executed once this request has been processed. The process result method will receive the resulting xml from the web service call.

jQuery: the processResult() function

The processResult() method is used to generate the resultant HTML script from the web service call result xml file. The role of this method is to parse the xml and get the required HTML.

Please excuse me for the bad formatting (I am really bad in the designing).

Notice the code that we have used to highlight the searched terms in the result set.

References

http://docs.jquery.com/Main_Page

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

http://spservices.codeplex.com/

http://weblogs.asp.net/jan/archive/2009/04/09/calling-the-sharepoint-web-services-with-jquery.aspx

Summary

I have done very basic formatting to the search results. Be as creative as you can in the processResults() method, use the jQuery UI library to format the output.

We can build some really fantastic application with no server side coding and deployment overheads using jQuery.

jQuery : Enhancing List View web part rendering



Contents
jQuery : Enhancing List View web part rendering    1

Overview

The more I work on jQuery + SharePoint the more I get attracted to it.  There is limitless possibility when we use jQuery in SharePoint.  My latest research includes enhancing the way ListView web part gets rendered.
Once you get hold of the jQuery selector you feel like everything is possible and is very much in your hands. You just have to find a unique way of getting the required DOM element and then it obeys all your orders like a Gin (I am sure I am not exaggerating).

I hope this helps someone in need.

Requirements

The requirement was to display following table in a web part.

Topic
Presenter
Link to Presentation
Link to Video
Some topic Some presenter [ICON to download ppt] [Icon to download video]
I first thought of reading the data using our dear friend SharePoint web services and then rendering it on my own way.  But then I thought I should be able to do it in some OOB way.  But the issue was that I had to show two icons that are linked to content
       Icon to download presentation.
       Icon to download the video.

Solution

I uploaded all the presentations onto the document library.  The default document library did not have the columns to display the additional metadata about the presentation.  So I created the columns that described the presentation.
       Topic (Single line of text)
       Presenter (Single line of text)
       Video (Hyperlink that will contain the URL to video)
Figure 1
I uploaded the videos in the same folder and updated the metadata of presentation to contain link to the video file.
The benefit that I get out of this is the “Type” column renders the icon and it is linked to the original document.  And I had added the other metadata using columns, this is 70% complete, I still have the task to display the icon that is linked to video. 

When I add the list view web part I could see following view.

Figure 2

Note: Video column was getting rendered as the plain hyperlink.

jQuery – the lightweight magic

Since I am a big fan of jQuery and I knew there must be a way to select everything on the page.  I did some analysis on how this is rendered.  I found that its all Table and TD tags.  So the list view table is rendered as

<TABLE —- summary=”<<Web Part Title>>”>

Something worth noting is that the table contains a property called summary and the value contains the web part title.  Now the next job is to find how the link is getting rendered further down the line I found something interesting.

<TR><TD Class=”ms-vb2″><A HREF=”URL of Video”>Text to Display</A></TD></TR>

So it was a TD that contained class “ms-vb2” and contained a child node as <a>.

Once I identified the way it renders the link it was just a matter of replacing the text of <a> with <img> of my choice. 
By this time all the jQuery folks have an idea of how to do that.  Still I thought of copying the magical part of the script.
Note: My apologies for copying this as image, but for some reason I was not able to publish this document when it contained jQuery code. (Google and Blogger started boggling me J)

Figure 3
Just replace web part title with the summary of your list view table.  And here is the final output.
Figure 4
Now you see that I have the desired icon to download video and it looks really good.  And all that I needed was 4 lines of jQuery and understand how SharePoint renders the contents.

RegardsSudhir Kesharwani  MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET 

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 

jQuery – Announcement carousel for SharePoint


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 GitHub – jQuery SharedCode 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/’&gt; \
   <soapenv:Body> \
     <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).
<link rel=”stylesheet” href=”{SITE URL}/Shared%20Documents/BIN/css/news-ticker/news-ticker.css” type=”text/css” media=”screen” />
<script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jquery-latest.min.js” type=”text/javascript”></script>
<script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jcarousellite_1.0.1.hoverPause.js” type=”text/javascript”></script>
<script src =”{SITE URL}/Shared%20Documents/BIN/jqlib/news-ticker-source.js” type=”text/javascript”></script>
<div id=”newsticker-demo”>   
     <div class=”newsticker-jcarousellite”>
                                <ul id=”newsItems”>
        </ul>
    </div>
</div>
<div id=’status’></div>
References
          http://sorgalla.com/jcarousel/
Regards, Sudhir Kesharwani MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET