Preview metadata in list view on mouseover – updated version

18.09.2011 I have added a bit more functionality. The CEWP code and the file “PreviewMetadata.js” has changed. Re-read this article for details.

---

This is a remake of a previously posted solution for previewing an item in a list when hovering over the table row or a custom image. You find the code below, but first an overview of the features.

List view

Preview on hover

This solution works in both SharePoint 2007 and in SharePoint 2010, but the code is different for the two. It is tested in plain list (and document library) views with grouping and paging, and in calendar views. You can specify which columns to preview, or have the full DispForm array of fields. If you have multiple list view web parts in one page, you can specify which lists to activate this feature on.

How to use

Download the code for the file “PreviewMetadata.js” from here. Ensure you pick the right version (SP2007 or SP2010). Upload the file to a shared document library, or put it in a folder using SharePoint Designer. You then insert a ContentEditorWebPart (CEWP) below the list view web parts in the page. You must modify the script src to the file “PreviewMetadata.js”, and if you like, to the jQuery library.

Hints

Read here how to find the list Guid and the FieldInternalName for your list fields.

CEWP code for SharePoint 2007

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/PreviewListItems/PreviewMetadata.js"></script>
<script type="text/javascript">
config = {arrOfFieldsToShow:[],
		  hideIdColumn:true,
		  activeListGuids:[],
		  hideCreatedAndModified:true,
		  hideFormLabel:false,
		  hoverDelay:100,
		  hoverImg:{active:true,
		  			path:'/_layouts/images/chm16.gif',
		  			height:'12',
		  			width:'12',
		  			prependTo:'LinkTitle',
		  			hoverImgDescription:'Hover over this image in the list to preview the list item'}};
initjLoadMe(config);
</script>

CEWP code for SharePoint 2010

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/EMSKJS/PreviewMetadata/PreviewMetadata.js"></script>
<script type="text/javascript">
config = {arrOfFieldsToShow:[],
		  hideIdColumn:true,
		  activeListGuids:[],
		  hideCreatedAndModified:true,
		  hideFormLabel:false,
		  hoverDelay:100,
		  hoverImg:{active:true,
		  			path:'/_layouts/images/chm16.gif',
		  			height:'12',
		  			width:'12',
		  			prependTo:'LinkTitle',
		  			hoverImgDescription:'Hover over this image in the list to preview the list item',
		  			openInDlg:true}};
		  			
initjLoadMe(config);
</script>

Note to SharePoint 2010 users:
Add this code to a text file and put it in a document library, then use the content link option on the CEWP to link to this code. This is necessary to overcome a possible “bug” in the CEWP handling when editing a SP2010 page where the HTML is accumulated when editing the page.

This tip is also recommended for SharePoint 2007 users, but is not absolutely necessary.

Parameters explained

• arrOfFieldsToShow: Array of FieldInternalNames to show. Leave empty to show all fields from DispForm. (*) To hide the field name for individual fields in the preview, put # as a suffix to the name like this: ['Title#'].
• hideIdColumn: true or false. If true, the ID column must be placed to the far right in the view.
• activeListGuids: Array of the Guids of the lists to activate this feature in. If left empty, all list view web parts will be active. Use this if you have more than one list view web part in the page and does not want to activate this feature for all web parts.
• hoverImg: If the parameter “active” is true, the preview will be shown when the user hovers over the image specified. If false, the preview will be shown when the user hovers over the table row.
• hideCreatedAndModified (*): true or false. Determines whether or not to show the “Creates by” and “Modified by” at the bottom of the preview.
• hideFormLabel (*): true or false. Determines whether or not to hide the field names column entirely. When set to true, this one overrides individual field settings under “arrOfFieldsToShow”
• hoverDelay (*): The delay in milliseconds from the user hovers over the image / row until the preview is triggered. If used with “hover” over the entire row, set this higher to prevent shoving all previews when the user swipes the mouse over multiple rows.
• active: true or false.
• path: The path to the image used as “hover image”.
• height: Image height in pixels.
• width: Image width in pixels.
• prependTo: The FieldInternalName of the field to prepend the hover image to. The Title field with menu has FieldInternalName “LinkTitle”
• hoverImgDescription: The Description text on the “instructions” shown above the list view.
• openInDlg: (SharePoint 2010 only) Defines whether the form is opened in a dialog when the user clicks the hover image.

(*) New in v2.3 for SharePoint 2007 and v1.1 for SharePoint 2010.

---

Ask if something is unclear.
Alexander