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.
Regards, Sudhir Kesharwani MCTS - MOSS 2007 | MCTS - WSS 3.0 | MCPD-EA | MCSD.NET
