jQuery How To: Hide rows in SharePoint 2007 List View Grouped web part


I had been looking for a script to hide all the rows in a SharePoint 2007 Grouped list view web part, today I had the opportunity to come up with my own and thought of sharing it with you all. A Grouped list view makes it bit tricky to hide all rows since the resulting HTML contains group header and the structure is very difficult to read.

As always the first step is to read the HTML script, thank fully we have Developer Tools and I simply love it.

To keep this blog short and simple I will not get onto details of pre-requisites and add my script but here is a rough idea

  • Make sure to have everything required for jQuery (Content Editor etc.)
  • Create a SharePoint List (or use existing), create a view that is grouping the rows based on one column.
  • Add a list view web part on the home page (or web part page)
  • Make sure to use a grouped view to display in the list view web part.

Here is how the HTML is organized in case of grouped list view, I just took the screen capture from my developers tool:-

<Div> element represents the area where list view web part is loaded, under that you will find that the Group Header row and data row is organized using <tbody> element. Also note that list view header row is also rendered using the <tbody> element, we would like to keep the header rows intact while hiding everything else beneath it.

You will notice that except for the header row every <tbody> contains and ID that is bit dynamic (the number changes depending on the number of groups) .

Below is the jQuery script that could result in hiding every details row (including group header) and keep the list view header row.

Sorry for keeping this as image but here is the code for you to copy J ( I am not sure if formatting will be right but the code is correct J).

Note: Please ensure to change the web part ID in the below code to run, look for the div element and replace the id.

<script
type=”text/javascript”>

$(‘document’).ready(function(){

    //Loop through all the <tbody id=””> element that contains an ID attribute

    /*Note: The header tbody does not have ID attribute*/

    $(“div#WebPartWPQ11”).find(“tbody[id]”).each(function(){

    

        //Loop through all the TR element under the tbody

        $(this).children(‘tr’).each(function(){    

        

                    //Hide this table row

                    $(this).hide();

                });        

    });

});

</script>

 

Once again, sorry for keeping a running blog rather than the detailed one, but I just wanted to share this quickly with you all, hope this will help someone in need, feel free to comment or reach out to me.

Sudhir Kesharwani

Advertisements

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

Iterating through Sharepoint Discussion List Replies


Hi,

Recently i had been working extensively in the integration of sharepoint discussion list and the document library.

I had one requirement where i have to iterate through the replies of a sharepoint discussion thread, i could hardly find any posts related to that.

First of all Sharepoint discussion lists are very different then other sharepoint lists. It is very different becase it stores the data differently. If you look at the settings of discussion list you will find that it contains two content types

1. Discussion Content Type

2. Messages Content Type

If you digg further you will find that discussion content type is derived from sharepoint folder content type and messages content type is derived from item content type.

Each message(reply) in the discussion list contains a field called ParentFolderId. This field is hidden from the new/edit/view forms of discussion list.

This field always contains id of the root folder for this message (e.g. id of the root discussion thread)

so if you want to get a reference of root discussion thread(aka folder), you can use following piece of code(considering that you have reference to the message)

int rootDiscussionThreadId = ListItem[“ParentFolderId”].ToString();

So when you start a new discussion, internally sharepiont creates a folder withthe subject of the discussion, moving forward all the replies to the root discussion thread are nothign but items created inside the root discussion thread.

Discussion List

> Discussion – 1

–>Message 1

–>Message 2

> Discussion – 2

–>Message 1
–>Message 2

> Disccusion – 3

–>Message 1
–>Message 2

So if you iterate through all the items in the sharepoint list using he normal SPList.Items property, you will get reference of all the root folders (not the replies.)

Even when you navigate to flatView.aspx for any discussion thread, or any other page related to discussion thread you will always find a query string parameter named rootFolder, this query string parameter holds the unique id of the discussion folder.

Getting Replies of a Discussion

If you are in a situation where you have to loop through replies of a perticular discussion thread, you can use folowing code (assuming that you have obtained parent folder / reference of discussion item)

SPQuery queryText = new SPQuery();
queryText.Query = <>;
queryText.Folder = discussion.Folder;
//IMP: setting the folder will get items from that perticular folder
SPListItemCollection relatedDiscussions = discussion.ParentList.GetItems(queryText);

Please note that since we want to query items from a perticular folder of the discussion list, we are setting the folder property of SPQuery object to the folder that we want to query. Since my discussion is nothign but a folder in the discussion list, i am setting the folder using that discussion object.

When this query is executed, relatedDiscussion collection will contain list of replies for the given discussion folder,