03.12.2013: New version found here
14.06.2012 I forgot something in v2.2 – to avoid confusion i add another version v2.3 with support for mixed setup with calendars and lists in one page.
14.06.2012 v2.2 adds support for calendar day and week view, and adds an optional “Edit item” button. See updated CEWP code and description of the new “argObj parameters” below.
29.02.2012 v2.1. Fixed a bug when adding a document library view outside a document library.
14.02.2012 Fixed a missing </script> tag in the CEWP code example.
I have previously posted two articles on this topic:
Preview metadata in list view on mouseover and Preview metadata in list view on mouseover – updated version.
Note that this one is for SharePoint 2010 only.
This solution does the same as the previous solutions, but it is rewritten for SharePoint 2010 and is cleaner and simpler.
This solution uses the jQueryUI-widget “dialog” to show the preview. The theme used in the images is “sunny”. You can find all themes here. You can change the theme by pointing to another css-file in the CEWP code.
You can have the preview trigger when you hover over the entire row, over one specific column, or over an image prepended or appended to a specific column.
The background-color of the <td> can be controlled in the CEWP code
- Download the file “PreviewItemOnHover.js” from here.
- Upload the file to a document library, or a folder created using SharePoint designer.
- Get the the CEWP code from the code block below. Change the jQuery and jQueryUI script src to refer local files if you prefer that. Get the files here and here
- Change the script src to the file “PreviewItemOnHover.js” to reflect your local file location.
- Change the “argObj” in the function “init_preview” as described below.
- Place a CEWP in the page where you want the code to apply.
- Put this code in a text-file alongside the file “PreviewItemOnHover.js”, and refer it trough the content link option of the CEWP.
<style type="text/css">
td.hoverMe{
background-color:#FCD116;;
}
td.hoverMe:hover{
background-color:transparent;
}
</style>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/sunny/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<script type="text/javascript" src="/test/Scripts/PreviewItemOnHover.js"></script>
<script type="text/javascript">
function init_preview(){
var argObj = {arrOfFieldsToShow:[],
dlgWidth:500,
timeout:6000,
autoCloseLabel:'Closing in {0} seconds. Hover over the dialog to prevent it from closing.',
hoverFirstTD:true,
hoverImg:false,
hoverImgSetup:{hoverTdIndex:2,
prepend:false,
imgSrc:'/_layouts/images/gosearch.gif'},
editButton:{active:true,
btnText:"Edit item"}
};
previewItems(argObj);
}
</script>
- arrOfFieldsToShow: If you do NOT want all fields to show, you can add all fields you want to show here, Note that if you add fields to this array, it’s ONLY those added here that will show.
- dlgWidth: The width of the preview dialog.
- timeout: The timeput before the dialog auto-closes in milliseconds (1000 = 1 second).
- autoCloseLabel: The dialog title with countdown (before hovering over it).
- hoverFirstTD: true or false. If true, the first column will be highlighted to indicate that it can be hovered. The style can be controlled in the style-tag in the CEWP code (td.hoverMe).
- hoverImg: true or false. If the above parameter is false, and this is true, use the next parameter “hoverImgSetup” to decide where to insert the image, and what image to insert.
- hoverImgSetup:
- hoverTdIndex: The column index (0 is first column) from the left where the hoverImg will be added.
- prepend: true or false. Determines whether to append or prepend the image to the text in the target <td>.
- imgSrc: The url to the image to usee as “hoverImg”.
New in v2.2:
- editButton:
- active: true or false.
- btnText: The text on the edit item button.
If both “hoverFirstTD” and “hoverImg” are false, hovering anywhere in the row will trigger a preview.
Learn how to find FieldInternalNames here or here
If i have forgot something, please let me know by leaving a comment below.
If you like the solution – buy me a beer!
To make this work in a list view, please verify that the setting
Tabular view > Allow individual item checkboxes is activated in the “Modify View settings”.
What this setting does is to add the checkbox in front of the row. This solution depends upon this control to pick up the item ID.
Alexander
