Stay tuned

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

I recently landed up onto a page Daily Posts at WordPress and I think it motivated me to join the campaign.  So far this is the most innovative way to involve the bloggers to blog more.

I wordpress could compup with some contest on blogging (some form of rewards…hmmmm )

I decided to join this campaign and I assure you that you will here more frequently from my side

Thanks wordpress for this initiative….

-Sudhir Kesharwani

I found it worth putting down on paper and sharing. Comments welcome J

JQuery Library

The basic requirement to jQuerify any solution is the jQuery library. All we need to do is add a script tag that points to jQuery JavaScript file. For our solution we have downloaded the script file from jQuery Download page. We have uploaded the solution onto a document library the alternative way to enable jQuery is refer the file directly from Google Code CDN. The second way is definitely bit slowly since it has to load jQuery file from remote location.

Table Sorter Plug-in

The beauty of jQuery is the extensibility. We get plug-in written for almost every business problem, I was lucky here too many thanks to the simplest table sorter plug in by Christian Bach. I downloaded the JavaScript file and uploaded it onto the shared document. I also downloaded the StyleSheet to format my table from http://tablesorter.com/themes/blue/blue.zip.

Here is the final structure of my files.

Shared Documents

è CSS

o Style.css

o Other gif files

è JS

o jquery.min.js

o jquery.tablesorter.min.js

è tablesort.html (this contains the jquery code)

JQuery Code

The jQuery code is pretty easy for this. Add the reference to jQuery library and Table Sorter javascript file along with stylesheet (style.css). in the jQuery code call tablesorter() method for all the “table” tags. This is it. Following is the code snippet. I have kept this code in tablesort.html file.

HTML Code

The table sorter plug in looks out for all the <table> tag which contains the “class=tablesorter” attribute. Other requirement is that the table columns should be inside the <thead> element and table body should be inside the <tbody> element. For e.g.

ItemStyle.xsl template modification

Here is the modified template in the ItemStyle.xsl file to achieve the required html output. Notice the class attribute of <table> element the <thead> and <tbody> elements.

Enabling sorting on the CQWP tables

- Upload the modified ItemStyle.xsl file onto Style Library.

- Make sure that required JavaScript files and html file are uploaded on the SharePoint document library.

- Navigate to the page where you have added the Content Query Web Part.

- Add a Content Editor Web Part. Edit the web part and set the Content Link property to URL of “TableSort.html” file in the Shared Documents library (e.g yoursitedocumentstableSort.html).

Tip: You can keep this content editor web part as hidden, the jquery code to enable sorting will still work.

- This will make the column heading clickable. Clicking on the column heading will sort the rows of the table.

End Note

I hope this helps some one in need. I sincerely like to thank Ankur Chourasia and Christian Bach

The “Recent Blog Posts” web part is added by default on the SharePoint 2010 My Sites.  I was just wondering if we can add that using the SharePoint Object Modal.

I found out that adding a recent blog posts web part is really simple:-

// Get the web part collection
SPLimitedWebPartManager wpManager = web.GetLimitedWebPartManager(“default.aspx”, PersonalizationScope.Shared);

Microsoft.SharePoint.Portal.WebControls.BlogView wpBlogView = new BlogView();
/*This Is very important.  Make sure To Link To the xsl file*/
wpBlogView.XslLink = “blog.xsl”;
wpBlogView.Title = “Recent Blog Posts”;

wpManager.AddWebPart(wpBlogView, “WebPartZone”, 0);

Hope this helps some one in need  

Regards,

Sudhir

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.

Overview

I hope this helps someone in need.

Requirements

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

Solution

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

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

jQuery – the lightweight magic

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

<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>.

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

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.