Preview metadata in list view on mouseover

12.09.2011 A new version is posted here.

30.07.2010 A major update of the script to tidy up the code and to support previewing in a image library. Please read trough the article to get the changes to the CEWP code. The solution is tested in IE 8, Firefox v3.6.8 and in Google Chrome v5.0.375.125.

22.06.2010 Small update in line 118 and 125 to prevent “star” to be appended to lookup columns.

23.03.2010 Updated the code for “Preview_DispForm_metadata.js”. This update fixed compatibility with folders (thanks to Deano for finding the bug). Added support for a mix of lists and document libraries in the same webpart page.

19.02.2010 Fixed a bug if two different document libraries were present in the same webpartpage. The file “Preview_DispForm_metadata.js” is updated. Thanks to Ben for finding the bug.

09.01.2010: Fixed a major performance issue when viewing only selected fields from the metadata. Replace the code for the file “Preview_DispForm_metadata.js” to get the latest fixes.

10.12.2009: Fixed a hard coded “hoverImg” in the code – thanks to Amy.

By request from some of my readers i have, with basis in a solution created by Paul Grenier and published on EndUserSharepoint, made a solution that preview’s metadata from a list item or a document on mouse over.

The script i used as basis previewed metadata from DispForm in a CEWP beside a calendar view.

This modification adapts it to present a “floating” pop-up on mouse over when hovering over a table row, a calendar item, or on a small image added before a selected field.

The original script, made by Paul Grenier, previewed the full form from DispForm. I have adapted it so that one can display the full form, or specify an array of columns to display.

This script can be used in plain list view, grouped list views and calendar views.

New in this version is that the ID column must be in the view (not true for calendar view). The column can be hidden in the script.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The sourcecode for the file “Preview_DispForm_metadata.js” is found below.

Add a CEWP below the list view and add the code – examples shown below the screen-shots.

Here are some screenshots and the CEWP code:
Plain list view – all fields
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>

To hide the ID column, change the CEWP code like this:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
</script>

Plain list view – selected fields
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
    arrOfFieldsToShow = ['MultilinePlainText','Responsible'];
</script>

“hoverImg” used
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
    arrOfFieldsToShow = ['MultilinePlainText','Responsible'];
    hoverImg = '/_layouts/images/OPENDB.GIF';
    hoverImgDescription = 'Hover mouse over this image to preview the metadata'; // If left blank, no description is displayed in the pagetitle area
    prependHoverImageTo = 'LinkTitle'
</script>

Parameters explained:

  • hideIdColumn: true to hide the ID column. Defaults to false
  • arrOfFieldsToShow: Array of fields to show. Defaults to all fields.
    To have only a selection of fields, add to the array like this: [‘Title’,’MultilinePlainText,’Responsible’].
    To have only the value and not the label showing, add to the array like this: [‘MultilinePlainText|0’]
  • hoverImg: If you want to hover over an image and not the whole row, add the “src” to the image here. You must also set the parameter “prependHoverImageTo”.
  • prependHoverImageTo: A FieldInternalName to prepend the “hoverImg” to.
  • hoverImgDescription: A description that will be added to the page title area.

All parameters are optional.

Sourcecode for “Preview_DispForm_metadata.js” is found here

Note:

When new versions are released, they will be placed in a folder with the version number as label. Be sure to download the latest version.

If you are using a browser other than IE, right click the file and select “Save link as” or “Save linked content as…”.

Ask if something is unclear.

Regards
Alexander

161 Comments on “Preview metadata in list view on mouseover”

  2. Pingback: Links (11/19/2009) « Steve Pietrek – Everything SharePoint
  3. Pingback: Preview metadata in list view on mouseover « SharePoint JavaScript's Scripts Rss
  5. Pingback: SharePoint Kaffeetasse 141 - Michael Greth [SharePoint MVP] - SharePointCommunity
  6. Pingback: SPPD131 SharePointPodcast - SharePointPodcast - SharePointCommunity
  7. Pingback: SPPD131 SharePointPodcast - Michael Greth [SharePoint MVP] - SharePointCommunity

  9. Looks interesting. I implemented the code above but receive a Nll when the pop up previews the Title and value. I check various fields. I see it has the list of fields to look up but the value is has is undefined. Any insight?

    thanks,
    Eric

  10. Alexander,

    Thanks for your response. I tried your code on another list and it works perfectly. The list in question has a problem. When I go to the DispForm.aspx from the link Title is displays the following messsage:
    List does not exist

    The page you selected contains a list that does not exist. It may have been deleted by another user.
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Runtime.InteropServices.COMException: List does not exist

    The page you selected contains a list that does not exist. It may have been deleted by another user.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [COMException (0x81020026): List does not exist

    The page you selected contains a list that does not exist. It may have been deleted by another user.]
    Microsoft.SharePoint.Library.SPRequestInternalClass.GetListsWithCallback(String bstrUrl, Guid foreignWebId, String bstrListInternalName, Int32 dwBaseType, Int32 dwBaseTypeAlt, Int32 dwServerTemplate, UInt32 dwGetListFlags, UInt32 dwListFilterFlags, Boolean bPrefetchMetaData, Boolean bSecurityTrimmed, Boolean bGetSecurityData, ISP2DSafeArrayWriter p2DWriter, Int32& plRecycleBinCount) +0
    Microsoft.SharePoint.Library.SPRequest.GetListsWithCallback(String bstrUrl, Guid foreignWebId, String bstrListInternalName, Int32 dwBaseType, Int32 dwBaseTypeAlt, Int32 dwServerTemplate, UInt32 dwGetListFlags, UInt32 dwListFilterFlags, Boolean bPrefetchMetaData, Boolean bSecurityTrimmed, Boolean bGetSecurityData, ISP2DSafeArrayWriter p2DWriter, Int32& plRecycleBinCount) +333

    [SPException: List does not exist

    The page you selected contains a list that does not exist. It may have been deleted by another user.]
    Microsoft.SharePoint.Library.SPRequest.GetListsWithCallback(String bstrUrl, Guid foreignWebId, String bstrListInternalName, Int32 dwBaseType, Int32 dwBaseTypeAlt, Int32 dwServerTemplate, UInt32 dwGetListFlags, UInt32 dwListFilterFlags, Boolean bPrefetchMetaData, Boolean bSecurityTrimmed, Boolean bGetSecurityData, ISP2DSafeArrayWriter p2DWriter, Int32& plRecycleBinCount) +447
    Microsoft.SharePoint.SPListCollection.EnsureListsData(Guid webId, String strListName) +1228
    Microsoft.SharePoint.SPListCollection.EnsureListsData(String strListName) +131
    Microsoft.SharePoint.SPListCollection.ItemByInternalName(String strInternalName, Boolean bThrowException) +565
    Microsoft.SharePoint.SPListCollection.GetListById(Guid uniqueID, Boolean bThrowException) +138
    Microsoft.SharePoint.SPListCollection.get_Item(Guid uniqueID) +76
    iLoveSharePoint.Fields.LookupFieldWithPickerControl.CreateChildControls() +277
    System.Web.UI.Control.EnsureChildControls() +146
    Microsoft.SharePoint.WebControls.BaseFieldControl.OnLoad(EventArgs e) +216
    System.Web.UI.Control.LoadRecursive() +66
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Control.LoadRecursive() +191
    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2428

    Any insights on how to repair the list?

    Regards,
    Eric

    1. Hi,
      I guess the DispForm.aspx has been edited in SharePoint designer? – if so – try to (in SPD) right click on DispForm.aspx and select “restore to site definition”.

      Alexander

  11. I often use dataviews on complex pages where I have one dataview driving the other via webpart connections. In order to save real estate, I’d like to use the mouseover to reduce the amoujnt of info on an item displayed but allow it to be viewed with the mouseover. Could this same idea be applied to a dataview? What parts would you think need to be changed?

    Eric

    1. I have not tested it with a dataview. Look at line 98 in the code above – it is here i specify what to search for and append the “hoverimage” to. In line 104-121 i extract the url to the DispForm of that element.

      Alexander

  12. Hello Alexander,

    your Blog is awsome and help me a lot. But i just have a question, is it possible to mix two of your scripts togehter. I want to use the script for the Metadata and the script for editing a field in a listview both on the same list. Unfortunatly i’m not a javascript programmer so maybe ou can help me out with some hints.

    Thanks, Mike

  13. Pingback: Show current row wrapped in a floating table when hovered « SharePoint JavaScript's

  14. Can i have mouse over preview without referencing to an image?

    I am using html coding to show bullets in different colours etc. like that of traffic light (green/orange/red) and still wants to have preview of contents like that from comment field.

  15. Does this function have a limitation?
    Tried it on several list and it work fine with list under 1000 items.
    With more then 1000 items it does not showing the image link and does not work for me.
    I have only 3 list wiht over 1000 items and none of the list is working.
    What do you think?

    Regards
    Anders

    1. Hi,
      I tested it in a library with 1200 items. The “hoverimage” is displayed as it should, but there were a major performance issue with a “long running script error”.

      I have updated the code to fix this issue.

      If you do not see the “hoverimage” – are you sure that you have the title column (“Title (linked to item with edit menu)” or “Title (linked to item) “) in the view?

      Alexander

  16. [Moved by Alexander]
    This is very interesting.
    But how can i make the multiline text to look like “view entries..” ?
    Also prependHoverImageTo = ‘MultilinePlainText’; is not working for me.It is working only if prependHoverImageTo = ”;

    1. Hi,
      To get the “View entries” you have to activate “Append-functionality” to the field (under list settings).

      The parameter “prependHoverImageTo” is used ONLY for append fields.

      Alexander

  17. This script doesn’t appear to work on a web part page when you have two list views on the page (from two different lists). What part of the script would need to be modified to make this possible?

    The scenario would be the following…

    You have a web part page that provides two list views of information, which is filtered via a common field. You want to see the meta data when you hover over an item on either list view web part (they are positioned in a left web part zone and a right web part zone – so they are side-to-side).

    The behavior I am experiencing is only the right web part zone displays the proper meta data. The left web part zone displays metadata for a different file than the one you hover over.

    1. Hi,
      I have done a short test with a webpartpage containing different lists, and cannot find anything wrong. What type of lists (custom list document library or other) do you have in the view?

      Alexander

  18. Thanks for the reply Alexander.

    Here is the scenario…

    Two normal document libraries created within the SharePoint GUI.

    Create a web part page, and display each library’s web part. One in the left hand zone, one in the right hand zone.

  20. Pingback: Append Text Hover View « Highbrowse – SharePoint

  21. Is this supposed to work on a MOSS issue tracking list with a comment field? What if the issue tracking lists’s fields are renamed? I’ve tried using the “Comment” field name as well as the renamed fieldname for the comment field.

    1. Hi,
      The script is made for a “Custom list” with “listBaseType=1”.

      To make it work in a issue tracking list, you must edit the script to check if listBaseType==1 or listBaseType==5.

      See if you get it working. Let me know if you need some help.

      Alexander

    1. Hi,
      It is possible, but there is so little time… If you wait a bit i will post a solution i have worked on lately.

      This is kind of a “Excel vLookup” type of solution which can pull in and link to items from another list based on a lookup from the “child” item to “this” item.

      Alexander

  23. Hi,

    Great scripts and a big thanks to you!!

    I’ve recently updated to your latest version of the Preview_DispForm_metadata.js. Foolishly deleting the previous version … Since installing the latest one, I can get previews on 1st tier items in both document libraries and lists, but as soon as I go into folders or nested folders and try to preview items, I get a blank box with no metadata 🙁

    Not sure whether this is the code or my site … any help is greatly appreciated.

    Thanks again …. deano.

    2. Sorry for the Double Up Alexander … just realised I should have hit reply!!
      Hi Alexander,
      Yes I’m still experiencing this issue. I’ve tried linking back to both jquery-1.3.2.min and the newer jquery-1.4.2.min library with the same result. CEWP is placed under the Document library web part. The only thing that I have changed was the new code for the Preview_DispForm_metadata.js. I’ve used the code for “Document Library” with “arrOfFieldsToShow” left blank to display all fields.
      It displays perfectly for 1st tier but anything in folders gives me a thin horizontal box with no metadata displayed.
      Cheers and thanks again for any help!
      deano.

  24. Hi,

    I would like to display a calendar on the default.aspx page. However, the calendar view doesnt work with this script. Is there anything that i can do to get it working on my homepage?

    Good stuff by the way.
    Mike

    1. Hi,
      I haven’t tried a calendar view on the default.aspx. The script handles calendar view’s in the default list. Can you please test that this works in your setup?

      Give me feedback and i will look at it.

      Alexander

    2. I have updated the code, see comment in the top of the article. This update should fix this issue. Please test it and let me know the status.

      Alexander

  26. Works great for regular lists.

    I have created a dataview and have a column that points to the DispForm.aspx url. I am able to see the hover image but the contents of the hover box is empty.

    Any ideas?

  27. Using the Plain list view – all fields

    It is only showing the first field.

    I am trying this in a Forms Library. I have all of the InfoPath fields brought over to the list, but am only showing a few fields in the list columns.

  28. I need this for a document library. However, I need the hoverIMG to appear in its own column next (to the left of) to the Name-field.

    1. If the image is to be displayed in the column, could you not use a hyperlink field set to “image” – the image would then display without having to use a script?

      Alexander

  29. Another awesome script! I have three questions:

    Q1) Is it possible to speed up the mouseover response with a parameter like the initShowRowAsTable(1000) in your “Show current row wrapped in a floating table” solution?

    Q2) Is it possible to check the value of a single multiline text field from the arrOfFieldsToShow and only display the icon if the field is not empty?

    Q3) I have only one field referenced in my CEWP on the list view page, but the icon is prepending several columns. They all happen to be lookup columns to other Lists on the same site. Can this be prevented?

    1. Q1: No, the pause is the actual time used to process the query.

      Q2: No, the “star” is added by a loop before the actual query is performed. Take a look at this one: vLookup type rollup for SharePoint

      Q3: Fixed by modifying line 118 and 125 like this

      var whatToFind = "a[href*='DispForm.aspx'][target='_self']";

      I will update the code in this article with this fix.

      Alexander

    2. Hi, I really appreciate all your effort and follow-up. I’m sure everyone who follows your work feels the same way.

      I tried the updated script but its still showing the icon on look-up fields. I wish I had the skills to troubleshoot it and help out, but I’m not there yet. Thanks for any reply!

  30. Hi Alexander,
    I like the code for hoevering over a hyperlink and it works, but I want to hoever over a titel in a list library which is an infopath form to show an image which is related to it, so we can look at a small image which related to the infopath form.

    1. Hi,
      If the image exists this would be possible, but to generate a thumbnail image from the infopath form itself is not possible.

      Alexander

  31. Hi Alexander,
    Thank you for coming back, the image is stored somewhere else but we like to relate the image to the infopath form because will make life easy when people search for specific form.
    so they will have a title and when they hoever over it will show them the image which relate to it.

    Regards,
    Osama

    1. Hi,
      If the naming of the image is consistent and for example resembles the form name (part from the extension) you could do this. Let me know if you need help adapting the code.

      Alexander

    1. Hi,
      The image in the article (the star) is pulled from the standard SharePoint image repository in “/_layouts/images/”. You can use any picture you want, just edit the “hoverImg” in the CEWP code.

      Alexander

  35. I have followed the instructions and have placed

    hoverImg = ‘/_layouts/images/Desview.GIF’;
    hoverImgDescription = ‘Hover mouse over this image to preview the metadata’;
    arrOfFieldsToShow = [‘Title’];
    prependHoverImageTo = ”; // If “append-field” insert FieldInternalName here

    In a CEWP and the Preview_DispForm_metadata.js in a Doc library (JQuery) on the site.

    For some reason it still does not work. I do not even get the hoverImgDescription to display. I do not know what I’m doing wrong…

    1. Sorry the full script did not copy…

      hoverImg = ‘/_layouts/images/OPENDB.GIF’;
      hoverImgDescription = ‘Hover mouse over this image to preview the metadata’;
      arrOfFieldsToShow = [‘Title’];
      prependHoverImageTo = ”; // If “append-field” insert FieldInternalName here

    2. I am actually experiencing the exact same thing as Marty.

      I have re-downloaded the code and checked different versions of jquery as well.

      I also checked field names.

    3. Got it now. As in life, mine turned out to be a typo

      When I adjusted the src I had messed up slightly the begging of the lines that look like this one.

      <script type="text/javascript" src="/ …

      I will say, this is one of the best tricks yet. Thank you Alexander for improving upon the original coding!!!!

  36. Hi,

    Star icon is added to picture library rows as well. But when we mouse hover, it is showing blank in the popup.

    Please guide me how can we preview picture library items as well.

    If it’s not possible, please let me know how to avoid appending star icons on picture library.

  37. I have re-checked all my src’s and they all work. I even tested them in the CEWP “test Link” text box. I’m still getiting nothing. Could there be a setting in the Site Admin that’s not enabled?

  38. Hi,

    Star icon is added to picture library rows as well. But when we mouse hover, it is showing blank in the popup.

    Please guide me how can we preview picture library items as well.

    If it’s not possible, please let me know how to avoid appending star icons on picture library.

    1. @CY,
      This script is designed for a listview. It allows you to display metadata for each row item. A DispForm already contains all or most fo the metadata.

    1. Hi,
      It displays only the metadata already stored in the current item, and only what’s already visible in the DispForm, as it is the DispForm that is the basis for the preview.

      Alexander

  43. I have used this script sucessfully with a wiki list I now want to use it on a discussion library.

    So when you hover over the img next to subject it shows the dispform details of the post.

    I followed same process as before but the hoverimg will not display.
    Is there something different about a Discussion list???

    1. Hi,
      I tested it in a discussion board without any problems. Please conform that you are using the latest code and that the CEWP is placed below the form.

      Alexander

  44. Yes I downloaded the code again to make sure.
    Yes the CEWP is below the discussion.

    It puts the “Hover mouse over this image to preview.” message at the top but nothing else is happening.

    The ID column is not hidden.

    Which column do I specify for the prependHoverImageTo?

    thanks

    2. Hi, check line 51 “$(“div[id^=’WebPartWPQ’]”).each(function(){” against your actual WebPartWPQ ID, I had a similar problem, (and this was a problem on the PreviewAttachment script too) when I changed the line to the actual number “WebPartWPQ1” it worked as designed, the star was displayed.

      However, now the entire row is highlighted, but I don’t get any popups, especially not for the field that I want, I guess I have to study the code even more 🙂

      Chris

    3. Chris,
      Double check the FieldInternalName – if it is “off” it does not work.

      Try to pass an empty array for “arrOfFieldsToShow” to show the full form.

      Alexander

    4. Hi Alexander,

      the FieldInternalName I’d like to see (which is not in the view) is RAGDetails. I tried the empty array too but I only get the star (attached to a single line field, multi line or calculated fields won’t work – which might be as designed) and the entire line get’s highlighted on mouse over. RAGDetails is a field that gets filled by a selection from a “based on selection in another field” value.

      I’d like to have the mouse-over display the content of the field when I move the mouse over the line, preferably without the star or line highlighting. I’m slowly getting a grip of jquery, thanks to your scripts – now I only have to learn the methods and understand a bit more of sharepoint internals.

      Chris

    5. To view the full form you use this code (from the above article):

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
</script>

      Test that before narrowing down to specific fields.

      Alexander

  45. Hi, Alexander.
    This is great thing! But unfortunately it doesn’t work for me =(
    I’ve done everything as you wrote ( not once and twice ), but preview pane doesn’t opens when I’m pointing to the item ( in calendar or in the list ).
    And what interesting for me: another your script – preview pane for calendar, works fine, but I prefer to use one, mentioned above.
    What can be done for testing or maybe I should change smth in the script or smth else.

    Thank you!

  46. As Chris has mentioned above – I had to change string 51:
    to id=’WebPartWPQ2′ ( in MY case!! )
    Now it works fine ( but a little bit slowly =) ).
    Again thank you, Alexander! One more great script.

  47. Pingback: Sharepoint 2010 Calendars

  48. Hello Alexander,
    This appears to be exactly what I am looking for, but for some reason can’t get it to work on either the calendar view or a list. In both instances, I put the CEWP below the list and then calendar.

    On the calnedar view, nothing happens at all.
    On the list view, the message box keeps telling me that I need the ID, even though the ID is clearly visable on the page.

    Also, I don’t know if it makes a difference or not, but I am on Sharepoint 2010

    Thank you

    1. Hi,
      Being on 2010 makes a difference… I haven’t had the time to update this solution to support 2010.

      I cannot promise anything, but will try to find time to do this update.

      Alexander

  49. I had the March 2010 version working for me. I am testing out the current version with no luck. The script DOES hide the ID column, but will not display the star regardless of the field/internal name I try in this particular view.

  50. Hi,

    It looks very promising, but I can’t get it working on Sharepoint 2010 lists. Im getting :

    ‘The ID column must be in the view.
    You may hide it in the script call by setting the argument “hideIdColumn” to true.’

    Do you have a solution for the Sharepoint 2010 problem.
    Thanks!

    Robin

  52. Additionally… how can I append Source=document.referrer to the dispform.aspx link. This will help change the behavior of the Close button if a person clicks through on the star?

  53. Hye…I’m exactly following the step here..but since I’ve got this error “The ID column must be in view. bla…bla..”. I already viewed the ID on the list but still got this error message. Can you help me to figure out this?

  54. Hi, I’m trying this out on a SharePoint 2003 site and can’t get it to work. The code seems to be ignored – the ID field remains displayed and there are no pop-ups. Have you or anyone else done this on 2003? Thanks, Charlie

  55. Hi – I tried this on Sharepoint 2010.
    I created the Test library and added the JS files.
    i created the calendar and
    created the web part page added the calendar on top and the
    CEWP on the bottom and added your code.
    I do not get the pop up. Any Ideas?

  56. I have SP 2007 and followed all the instructions on this page. I get the popup but with no values. I tried changing the webpart ID like someone suggested, ensured both the scripts are working with the “Alert” showing function etc.. Here is the script i used in my CEWP.

    Can you please guide me on why the popup wouldnt show any values?

    Note: I am using this on AllItems.aspx

    1. Found the problem. When I have a list with IDs say 1, 2, 3 etc and have the Title column (with link and edit), the following code in the js is returning “1 “, “2 ” etc..

      var thisItemID = thisRow.find(“td[cellIndex=”+IDcolIndex+”]”).text();

      Fixed it by using “Title with link” as the column.

  59. Hello, I created a basic list. I added a web content web part under my list and added your code. I’m trying to display a column that is not displayed in my list’s view. I get the error “ID column must be in the view.” But when I go ahead and display that column in my view I still get that error. My real list has tons of columns and I’m trying to use this as a way to turn off the display of some columns, and give a preview of the metadata without having to open the list item to see everything.

    Can someone please help?

    4. My code currently just has the first two lines – jquery 1.4.4 js and metadata js. If I use a script type of text/javascript for the jquery line I get an error (ID column must be in the view). If remove the text/ part I don’t get the error. But in either case, I don’t get the mouseover. I’m just working with a basic custom list with 3 attributes. Am I supposed to edit something in the metadata js file so it knows the name of my list?

    5. OK, I’m getting closer. It works with displaying everything but if I try to get just one column to show up in the pop up I have the problem that SSS has – I get the pop up by no values are showing up.

  60. Hi

    Thanks very much for your hard work on this script.

    One quick question, when trying to display an array of columns, I don’t seem to be able to use columns with spaces in the title. For example if I have 3 columns Title, Role Summary, Responsibilities then this works:

    arrOfFieldsToShow = [‘Title’,’Responsibilities’];

    but this does not

    arrOfFieldsToShow = [‘Title’,’Role Summary’];

    Is this true, or am I just being dense?!

    Thanks again
    Andrew

    2. Alexander

      Genius! Thanks very much, that works a treat.

      Again, thanks for your script, and for responding so promptly to my question, much appreciated.

      Cheers
      Andrew

    2. It must have been something set on my work computer. I downloaded at home and mailed back to work and now the JS works.

      I was not able to get the array to work, without it all works well, what if your columns have spaces in them like: “Exit Strategy” “Line of Business”?

      1. You must use FieldInternalName and not display name.

        Alexander

  63. Alexander,
    This really IS a great code. Is there a way to adapt it so that it would work with a DataView Web Part rather than a traditional ListView?

    Thanks!

    1. Hi,
      All dataview webparts can be different and therefore the code must be adapted to each instance. It should not be very difficult, but i cannot make it without access to the specific dataview.

      Alexander

  65. Alexander,
    Thanks for your reply. If I were to send you some code from a simple DVWP–just as an example–would you be able to show me how you’d change the script to make it work?

    Thanks,
    kate grimes

    2. Hi,
      Sorry for the late reply, but I have a lot of questions to answer…

      Send me screenshots of the dataview in IE and the code from SharePoint Designer, AND the code from “View source” in IE and i will take a look.

      You find my email here

      Alexander

  67. I was able to figure out how to use the code to display the popup. One question though..it seems the default display is far more nicer looking then when you specify each column. How do you get the popup to look like the default but with only specific columns?

    1. Hi,
      I’m in the process of refurbishing this one for SP2010. I will post an updated version for SP2007 as well – featuring what you request.

      I do not know exactly when it is finished, but i hope to be done within a week.

      Alexander

  68. Hi,

    Great work here. It’s exactly what I need for the SP site I’m building. On my page, though, I have multile lists being used but only need the mouse over for one list. Is there an easy way or a future feature to specify which list the JS is being activated on?

    Thanks!

  69. Alexander,
    I hate to bug you, but I have tried this several different ways and here are my results. I have three different webparts displayed on one page. One displays a standard view of a list, the other two display two different standard views of a different list.

    I place the CEWP above the two web parts that display the same list (different views) and directly below the web part I want it to work with. What I get is that the script apparently is working on the bottom two web parts. The ID column disapears and the hover feature works. But on the top web part — the one I want it to work on — only the Header of the ID column is hidden (not the ID), and the mouseover feature does not work at all.

    One thing that is different about this list than the other two is that the displayed items in the list have a large ID numbers. They are like 2438-2460. Wheras the other two Web Parts are reflecting a list with much smaller ID numbers (1-10).

    Any ideas or other information you would like from me. Thanks so much for your response in advance. Here is my CEWP:

    hideIdColumn = true;
    arrOfFieldsToShow = [‘Title’,’Hours_x0020_Scheduled’];

    1. Hi,
      This code works only with one list view webpart in the page, As i wrote in the comment to Harry above, I’m in the process of rewriting this code to work in SP2010 as well. Your problem will be fixed in the new version.

      Alexander

    1. Hi,
      I’m working on it , but have some issues with the SP2010 support. I hope to have it published in the beginning of next week.

      Alexander

  72. Hi Alex, thank you for writing this script.

    Two things:
    1) The script does not seem to work with jquery version 1.6.3_min (but it worked great with 1.6.2_min). I get the “id not in view” error that others have gotten. Also IE8 says that “attr(…) is null or not an objecet”.

    2) The script seems to run very slowly in IE8, especially if we have multiple webparts also activating the hover-over. I am not sure if that is because all the look-up is done dynamically or because jquery apparently doesn’t play along well with CSS in IE8 (as far as I’ve read). Just wanted to let you know.

    Best, Jameel

  73. Hello Alex,

    I’m not sure where to remove the highlight. I’ve found the ms-class but when I try and comment it out not thing happens. Could you offer some specifics, please?

  74. Hi, I am able to get this to work with default DispForm.aspx. However, when I change to use an InfoPath form in the .items folder then it stopps working. Is there a way to get this to work with InfoPath forms?

  77. UNABLE TO DOWNLOAD THE FILE BECAUSE OF RESTRICTIONS… COULD YOU PLEASE FORWARD THE “Preview_DispForm_metadata.js” FILE TO THE FOLLOWING EMAIL ADDRESS “rams.shravan@gmail.com

    Thanks a lot in advance.. will reach out to you in case i need further help.

  79. Hi, Brilliant post, I need some urgent help to create some ECMA scripts for my project. I have an html map of europe with 39 countries marked out in hotspots. I have a SharePoint 2010 list with 3 fields; country, description, and url.

    I want to create an ECMA script to create a pop up with the country name and description when a user hovers over that country on the html map. I will be pasting this code into a Content Editor Web Part for use on my Intranet. I need to retrieve and filter the list data, then bind to the onmouseover event to trigger the pop up with the information.

    Can anyone help me with the script, I am new to Javascript. my HTML map code looks like this:

  80. Hi Alexander,

    I’ve used this script for quite sometime now and am very happy with it. I’ve noticed though that the script does not render in our external end users browser. The external end users have read access to the page in which the script is located.

    When testing externally, I can see the script render properly but then again I have full control as an owner to the page. Does this script need to be modified for permissions?

    Thanks,
    Jason

  81. Hello Alex,

    when we use by default site calendar so the script is working properly

    When we use custom share point colander so the script is not working please tell how we can solve this problem

    Thanks
    Deepak chauhan

      2. Sorry, but as I said: It is impossible for me to support user customized solutions as the variations are endless, and there is no way for me to create a generic solution.

        Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.