List view: Preview item on hover

Change log
June 1, 2014
Updated to v1.38:

  • Added “URL” and “Image” as “type” in the fieldData section of the configuration (for use with field of type Hyperlink or Image).
  • Tidied up a few unused variables.
  • Added id attribute “spjs_previewTable” to the main preview table for easier styling. Add style tag to the CEWP code and target the table like this:
    #spjs_previewTable{
    /* your css here */
    }

April 21. 2014
Updated to v1.37:

  • Fixed error when using in list with folders by adding “scope=RecursiveAll” to the query. Please note that you must also update spjs-utility.js to v1.182 or above.
  • Added option to turn on or off the edit item button in the top right corner of the dialog by adding “showEditBtn”:[true or false] to the configuration. See details in the configuration details below.

April 1. 2014
Updated to v1.36:
Fixed an issue with having multiple lists in a web part page. Let me know if there are still issues as I cannot test every possible combination.

March 30. 2014
Updated to v1.35:
Fixed a type in the script that affected IE8 when using the cross list functionality.

March 12. 2014
Updated to v1.32:

  • Removed String;# prefix when previewing calculated columns.
  • Added option to use other columns than ID to identify which item to preview when using the “advanced option” to pull information from another list. See details at the bottom of this article.

January 29. 2014
Updated to v1.31:
Fixed a bug when using in a calendar view on a web part page.
You must add a new variable to the CEWP code alongside the “spjs_listItemPreviewFIN” like this:

var spjs_listItemPreviewFIN = "HoverMe";
var spjs_listItemPreviewList = "{2b6961fc-2e5d-420e-b6d9-3ce7d1bb88b2}";

January 16. 2014
Updated to v1.3:
Fixed a bug that slowed the loading significantly due to a query being executed for each list item in stead of only once per list view.

December 15. 2013
Updated to v1.2 with these changes:

  • Fixed linefeed in multiline plain text fields.
  • Added option to use the value from any field in the form as dialog title. The standard value is “Title”. You find this as a new option in the config object “dlgTitleField”.
  • Added support for showing attachments in the preview. To enable showing attachments, configure it as any other field you want to include in the fields array – use “icon” to show or hide the document icon:
    {"fin":"Attachments","label":true,"icon":true}
    

December 09. 2013
v1.1: Updated the code for the file “PreviewItem.js” and the code example for the calculated column to support list view web parts in web part pages. The change to the calculated column is that the list GUID must be included. This is necessary only if you plan to use a list view web part, and not if you use the code in a proper list view. See details in the code for the calculated column below.

I have previously made several solutions for previewing information for list items by hovering over them in a list view. This is one supports SP2010 and SP2013 – and possibly SP2007 as well. I no longer have access to a SP2007 site and cannot test it there, but I have made an effort to adapt the code to (hopefully) work in SP2007 as well. If you find any problems with the SP2007 support, please post a comment below, and I’ll try my best to fix it.

IMG

This solution uses the well known trick of inserting an image tag in a calculated column, and selecting “number” as the format for the calculated column. This is the code that triggers the solution in a list view (see separate section for calendar view):

="<img src='/_layouts/images/loadingcirclests16.gif' fin='Preview' list='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' configindescription='1' onload='spjs.listItemPreview.init(this)'>"
New in v1.1:

The attribute “list” must be added if you want to use the solution in a list view web part outside the list itself. This attribute is the GUID of the list. You must change the string xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx to match your list. You can find the GUID in SP 2010 or SP 2013 by right clicking a list view in the list > view source > search for “pageListId”. In SP 2007 you must search for “ctx.Listname”.

Please note the FieldInternalName of the field in the “fin” attribute, and the “configindescription” set to “1” indicating that the configuration should be read from the field description. Set “configindescription=’0′” to configure the setup in the HTML Form Web Part (required for SP 2007, optional for SP 2010 and SP 2013).

Ensure you use the “Number” format to trick SharePoint into rendering it as proper HTML:
IMG

When you set “configindescription=’1′” in the calculated column, the configuration is read from the description of the calculated column itself. This way you do not need to edit the setup in a separate file. Please note that you still need to refer the code in the list views where you want to use this solution – or you could put it in the master page to access it in the entire site or site collection. When this is done, the actual configuration for this particular field is done in the list settings!

I’ll get back to the configuration later, but first the general setup.

Setup the scripts
Step 1:

I have used a “icon font” called Font Awesome for all the icons in this solution. Go get it here: Font Awesome.

Here is how Dave Gandy describes Font Awesome:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

In my example code I have linked the font awesome css file from bootstrapcdn, but you can download it locally if you like.

Step 2:

Download the file “spjs-utility.js” from here. Ensure you get the latest version.

Step 3:

Get jQuery from here. Use v1.10.x as the 2.x series in not compatible with IE below 9.

Step 4:

Get the code for the file “PreviewItem.js” from here. Ensure you get the latest version.

Step 5:

Add this code to a HTML form web part in the list view where you want the solution activated. Please note that you must insert it ABOVE the list view for the code to be accessible during page load.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/PreviewListItem3/PreviewItem.js"></script>

Now the initial setup is completed and you can configure the calculated column.

Setting up the configuration in the calculated column
Instructions for SP 2010 and 2013

First start by creating a calculated column with this formula:

="<img src='/_layouts/images/loadingcirclests16.gif' fin='Preview' list='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' configindescription='1' onload='spjs.listItemPreview.init(this)'>"
New in v1.1:

The attribute “list” must be added if you want to use the solution in a list view web part outside the list itself. This attribute is the GUID of the list. You must change the string xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx to match your list. You can find the GUID in SP 2010 or SP 2013 by right clicking a list view in the list > view source > search for “pageListId”. In SP 2007 you must search for “ctx.Listname”.

Insert the FieldInternalName of the newly created field in the attribute “fin” in the formula.

This is the settings you have access to when storing the setup in a the description of the calculated column:

{"headerCss":"",	
"clickToView":false,
"hoverDelay":200,
"showEditBtn":true,
"editInDlg":true,
"hoverIcon":{
	"off":"fa-arrow-circle-o-right",
	"on":"fa-arrow-circle-down",
	"css":"color:#FF6103;"
},
"dlgTitleField":"Title",
"maxHeight":400,
"maxWidth":600,
"dateFormat":"dd.MM.yyyy",
"fields":[
	{"fin":"Title","label":true},
	{"fin":"DateAndTime","label":true},
	{"fin":"Multiline","label":true},
	{"fin":"MyChoiceCol","label":true},
	{"fin":"MultiUser","label":true},
	{"fin":"Lookup","label":true},
	{"fin":"Attachments","label":true,"icon":true}
],
"footer":{
	"show":true,
	"css":"",
	"dateFormat":"dd.MM.yyyy hh:mm",
	"strings":{
		"default":["Created at","by","Last modified at","by"],
		"1044":["Opprettet","av","Sist endret","av"]
	}
},
"editFormUrl":null,
"listGuid":null,
"listBaseUrl":null
}
Instructions for SP 2007

First start by creating a calculated column with this formula:

="<img src='[Path to image]' fin='Preview' configindescription='0' iid='"&_ID&"' onload='spjs.listItemPreview.init(this)'>"

Insert the FieldInternalName of the newly created field in the attribute “fin” in the formula. You must also provide the URL to an image you want to show while the solution is loading. The image used in the SP2010 and SP2013 setup is not available in SP2007.

Please note the reference to the _ID field. To use this solution in a list view you must provide the item ID in the calculated column as this is not accessible in the list view table in SP 2007. You cannot use the ID directly in a calculated column as new items will get “0” for ID.

You can use the method described in this article to get the _ID column populated, or you can create a workflow that inserts the ID into the _ID field.

The configuration options for SP2007 can be found below in the section “Setting up the configuration in the HTML form web part”.

Explanation of the various keys
  • headerCss = css to override the dialog header
  • clickToView = true or false to determine whether you must click to open the preview.
  • hoverDelay = number of milliseconds to delay the preview. Used to prevent flickering when moving the mouse over the icons.
  • showEditBtn = true or false to determine whether or not to show the edit item button in the top right corner of the dialog.
  • editInDlg = true or false to determine whether or not to open the EditForm in a dialog. This setting does not apply to SP 2007.
  • hoverIcon = the icon to use for “on” and “off”. These icons must be selected among the font awesome css classes (icons). You can set the icon style using the css setting.
  • maxHeight and maxWidth = number to set the max dialog height and width. You will get a vertical scrollbar if the contents exceed the height setting.
  • dateFormat = a string representing the date format to use. These are the codes representing the various date and time parts:
    yyyy = for digit year.
    yy = two digit year.
    MM = month.
    dd = day.
    hh = hours.
    mm = minutes.
    ss = seconds
  • fields = array of object with the fieldinternal name of the field, and whether or not to render the field label.
  • footer = determine whether or not to show the footer with created and modified.
  • editFormUrl = null by default. Insert the Relative URL of another list to preview items form another location [advanced]
  • listGuid = null by default. Insert the guid of another list to preview items form another location [advanced]
  • listBaseUrl = null by default. Insert the listBaseUrl of another list to preview items form another location [advanced]
Setting up the configuration in the HTML form web part

This section describes how you can set up the configuration in the HTML Form Web Part and not in the calculated columns description field. This is a requirement for SP 2007 and optional for SP 2010 and SP 2013.

var spjs_listItemPreviewConfig = {
	"Preview":{
		"headerCss":"",	
		"clickToView":false,
		"hoverDelay":200,
		"showEditBtn":true,
		"editInDlg":true,
		"hoverIcon":{
			"off":"fa-arrow-circle-o-right",
			"on":"fa-arrow-circle-down",
			"css":"color:#FF6103;"
		},
		"dlgTitleField":"Title",
		"maxHeight":400,
		"maxWidth":600,
		"dateFormat":"dd.MM.yyyy",
		"fields":[
			{"fin":"Title","label":true},
			{"fin":"DateAndTime","label":true},
			{"fin":"Multiline","label":true},
			{"fin":"MyChoiceCol","label":true},
			{"fin":"MultiUser","label":true},
			{"fin":"Lookup","label":true},
			{"fin":"Attachments","label":true,"icon":true}
		],
		"fieldData":{
			"Title":{"disp":{"default":"Title","1044":"Tittel"},"type":"Text"},
			"DateAndTime":{"disp":{"default":"Date / time","1044":"Dato / klokkeslett"},"type":"DateTime"},
			"Multiline":{"disp":{"default":"Multiline","1044":"Flerlinje tekst"},"type":"Text"},
			"MyChoiceCol":{"disp":{"default":"Choice column","1044":"Valgkolonne"},"type":"MultiChoice"},
			"MultiUser":{"disp":{"default":"Multi select people picker","1044":"Flervalgs personvelgerfelt"},"type":"UserMulti"},
			"Lookup":{"disp":{"default":"Lookup","1044":"Oppslag"},"type":"Lookup"},
			"Attachments":{"disp":{"default":"Attachments","1044":"Vedlegg"},"type":"Attachments"}
		},
		"footer":{
			"show":true,
			"css":"",
			"dateFormat":"dd.MM.yyyy hh:mm",
			"strings":{
				"default":["Created at","by","Last modified at","by"],
				"1044":["Opprettet","av","Sist endret","av"]
			}
		},
		"editFormUrl":"/Lists/ListItemPreview3/EditForm.aspx",
		"listGuid":null,
		"listBaseUrl":null
	}
};

As you see, the configuration is mostly the same, but it is defined as an object named “spjs_listItemPreviewConfig” with the configuration for each of the separate calculated columns in it. In this example the FieldInternalName is “Preview”.

When setting up the configuration in the HTML From Web Part you must add the label and the field type for the fields you want to include in the preview. See the “fieldData” key in the code above. As you can see, the text values can be configured for MUI setup, but this will not affect SP 2007 – use the “default” key for the values.

You must provide the relative URL for the EditForm in the “editFormUrl” key. For SP2007 you have to provide the listGuid and the listBaseUrl as well.

Calendar view

In a calendar view you cannot rely on the calculated column to initiate the code for us. For SP 2010 and SP 2013 I have added support for automatically initiating the code, but you must insert two variables in the HTML Form Web Part like this:

var spjs_listItemPreviewFIN = "Preview";
var spjs_listItemPreviewList = "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}";

“Preview” is the FieldInternalName of the calculated column where the configuration is stored. Change the GUID to the one from your list.

Regarding SP 2007 support for calendar views

I do not have access to a SP 2007 site and cannot ensure it works. If anyone wants to test it and possibly fix it, I’m sure many will be happy. Look at the function “calendar” in the file “PreviewItem.js” to see how I have tried to support month view of a calendar in SP 2007.

In a SP 2007 calendar view, you will have to call the code “manually” from the HTML Form Web Part like this:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/PreviewListItem3/PreviewItem.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   spjs.listItemPreview.calendar();
});
</script>
Cross list preview

To be able to do a cross list “preview” you must add the configuration to the HTML Form Web part / CEWP in the “spjs_listItemPreviewConfig” object, and set the “editFormUrl”, “listGuid” and “listBaseUrl” to address the list you want to pull the information from.

You must also supply the ID or another identifier of the item you want to pull the info from in the calculated column in the “iid” attribute in the calculated column.
The default is to lookup an item using the ID for that item. In this case you must have the parent item ID in a column you can use in a calculated column:

="<img iid='"&[TheColumnNameWhereTheIDIsFound]&"' src='/_layouts/images/blank.gif' fin='CrossList' configindescription='0' onload='spjs.listItemPreview.init(this)'>"

* “CrossList” is the FieldInternalName of my calculated column.
* “[TheColumnNameWhereTheIDIsFound]” is the name of the column in the current list item where the ID of the linked item is found.

You can also match the item you want to preview in another column – like the “Standard” column in this example:

="<img iid='Standard:"&Standard&"' src='/_layouts/images/blank.gif' fin='CrossList' configindescription='0' onload='spjs.listItemPreview.init(this)'>"

In the iid attribute in this example I pull the value from the column “Standard” from the current list item, and will match this with the column with the same name in the “lookup list”.

When using this cross list preview you cannot know if the target list will contain an item to preview. If there are no items, the icon will turn gray when you hover over it.

Let me know if you like the solution, have trouble, or find any bugs! – use the comment section below.

Alexander

243 thoughts on “List view: Preview item on hover”

      1. OK,
        I see the image now, but was expecting to see the configuration. I need to see the calculated column code and the CEWP / HTML form web part code.

        You can email it to me – you find the email in the “About me” tab.

        Alexander

      2. i copy & paste all fields (columnName , Formula & description) base on Instructions for SP 2010 and 2013 . i did not any changes.

        should i send you again?

      3. Obviously something is not right, and I cannot help if I cannot see what you have set up in your calculated column and CEWP. The image you sent does not help – it is the configuration I need to see.

        Alexander

      4. i have no access to SP Server now, i will send you the images 2 days later (sorry…) to your email .
        just a notice, i put all JS & CSS & Fonts in a folder & reference them locally & directly in my masterpage (not from internet) & the font of CSS downloaded & placed beside the CSS & i changed the path of font inside of CSS (i give no 404 error in fiddler & every files are OK).

        thanks

      5. hi again… i resolved my Problem (but exists yet in this version )

        see this :
        http://picup.ir/di/RCR8/BugResolved.png

        i changed the sp10_up value to True ,hardcode (you should load the Data property as a LazyLoading variable like Init method that has an interval method)

        when DATA added to page , the _spPageContextInfo is null !!

        but there is another problem in UI :
        see this:

        http://picup.ir/di/KTZN/BugExists.png

        my fore-color is white !!!
        where should i change the value ?

        thanks

    1. I can not see the image, i have added the scripts in content editor web part and below i have added the Preview List and mouse over is not working can you please help me out in this…?

  1. Alex, getting an error in my calculated column when I hover over it that says it can’t find the field named “Preview”. I named the calculated column I created the exact same as you have in your example, and pasted in the formulas you have above without editing them. Is that the right way to do it? I may have misunderstood the instructions.

      1. I sent you the screen shots, but I think I figured out the issue. I was trying to use this on a page where I had dropped a list web part. When I did it on the actual list itself, then it worked. So is there a way to get this to work on a page with a list view web part?

      2. Spoke too soon. I got it to work, but then realized that I hadn’t changed the fields that would display to be the ones from my list. So I went back and changed that, but when I resaved it the icon no longer appears. This is what I have in the description of the calculated column.

        {“headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”Definition”,”label”:true},
        {“fin”:”Source”,”label”:true}
        ],
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:null,
        “listGuid”:null,
        “listBaseUrl”:null
        }

      1. Does it works for a “List View Webpart” or only for List View?

        If your solution don´t work at a List View Webpart…

        How i can insert the important HTML Form web part at a normal list view???

    1. Ok thanks – i will test it 😉

      But how can i insert a HTML Form Web Part in a normal list view?

      I don´t understand this:

      “Add this code to a HTML form web part in the list view where you want the solution activated. Please note that you must insert it ABOVE the list view for the code to be accessible during page load.”

      1. you mean this line?

        b.push(“”+res.Title+””);

        I change “res.Title” with my own column… -> “res.Bereich”

        but the result is the same… “undefined”

      2. Either you must have the field Bereich in the “preview form”, or you must add it to the viewFields array in line 173.

        I’ll look at this for the next release – I have not tested it myself.

        Alexander

  2. I didn’t know about “This solution uses the well known trick of inserting an image tag in a calculated column, and selecting “number” as the format for the calculated column” !! Very interesting 🙂

    Thanks

  3. Hi Alex,
    something is getting wrong in my configuration (SP2010).
    In the Calculated Column I’m getting “exclamation-triangle” instead of the “Arrow” symbols.
    When I hover over it, I got the following message:

    The configuration is either missing or corrupt
    [SPJS-ListitemPreview]
    Smething is wrong in the configuration of the calculated column:
    Could not find any recognizable digits.

    My Test-List has only a “Title-Column and the Preview-Column with the following settings:

    Columndescription:

    {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”label”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Created at”,”by”,”Last modified at”,”by”]
    }
    },
    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null
    }

    Formula:

    =””

    Please help.
    Regards Patrick.

    1. OK, here is the formula without angle brackets:

      =”img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview’ list=’xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’ configindescription=’1′ onload=’spjs.listItemPreview.init(this)'”

      Patrick.

  4. Hi Alex,

    the column type “multiple lines of text” do not consider cr or lf.

    The following Multiline Text:
    Row1
    Row2
    Row3

    Will be shown as:

    Row1Row2Row3

    How can I fix it?

    Patrick.

  5. Hi Alexander
    On the List view allitems.aspx, i am getting an js error “spjs is undefined”.

    Preview Column details:
    Formula : =””
    Data type : Number
    Description : CSS, as it is copied.

    Regards

      1. I was missing the link to js.. thats idiotic.
        But now a genuine problem. I am getting object expected at line 187 of PreviewItem.js.
        Code on the line : res = spjs_getItemByID({“listName”:list,”listBaseUrl”:baseUrl,”id”:iid,”viewFields”:viewFields});

  6. Hi Alexander,

    I am not geeting the Icons. Also when i hover on the place i get error message on the tooltip. Message is : Configuration is either missing or corrupt.
    Text in description Coulms of calculated field : {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”label”:true},
    {“fin”:”Description”,”label”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Created at”,”by”,”Last modified at”,”by”],
    “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
    }
    },
    “editFormUrl”:/sites/its1/Springboard/Demo%20Site/Lists/ListViewWPList,
    “listGuid”:D4F4FB58-4EE9-4A45-A9F2-E84670B4971B,
    “listBaseUrl”:/sites/its1/Springboard/Demo%20Site/Lists/ListViewWPList
    }

    Formula: =””

    Could you please help me with this.

    1. Hi, I see three errors initially:
      – editFormUrl are missing quotes and is not the full URL as it must end with EditForm.aspx
      – listGuid are missing quotes.
      – listBaseUrl is wrong and are missing quotes. The baseUrl in your setup would be “/sites/its1/Springboard/Demo%20Site”

      Alexander

      1. Hi Alexander,

        Thanks for responding.
        I have made the changes suggsted but still getting the same error. Here is the new code.
        {“headerCss”:””,
        “clickToView”:true,
        “hoverDelay”:200,
        “editInDlg”:false,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”Desctiption”,”label”:true}
        ],
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:”/Lists/ListViewWPList/EditForm.aspx”,
        “listGuid”:”D4F4FB58-4EE9-4A45-A9F2-E84670B4971B”,
        “listBaseUrl”:“/sites/its123/board/Demo%20Site”
        }

  7. Hi Alexander,

    It looks like a wonderful solution but I guess I’m missing something…

    I followed the instructions but there is no icon and when I try to hover it nothing happans…

    I suppose to install these font somehow?
    I so, is it possible to recieve a simple css (something like “@” when hoveing it it appears?)

    Thanks!

  8. Hi Alex, I don’t seem to be able to get the icons to appear, I know this is because the image files are not stored within my SP site. What I’m trying to ascertain is where do you get your loading circle image from that is used in this wicked preview tool? Iv’e got the FontAwesome pack but can’t see any image files to upload to my site….am I missing something here? (Aside from that the solution works like a charm)

  9. I’ve managed to get the default SP loading circle to show, when this is done though I get a square box with a red border. How do I use the same images you have in this example? In particular I like the right pointing arrow for the preview, and when you select the preview the arrow moves to a down one….

    Are you able to help me replicate this?

    1. Hi,
      This is what the fontawesome.css file is used for. Ensure you have the correct setup for this file – either download the full “packege” from the fontawesome site and upload it to your site, or refer the CSS file from their server.

      Alexander

  10. Hi,

    I’m trying to get this working with DFFS v3.2.62 and I’m working with SP2007.

    In the list view form – AllItems default view – you say we must ” can set up the configuration in the HTML Form Web Part and not in the calculated columns description field”

    So in ‘AllItems.aspx’ page I included a Form Web Part in which I added the following code:

    var spjs_listItemPreviewConfig = {
    “Preview”:{
    “headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”Título da Análise”:true},
    {“fin”:”M_x00f3_dulo_x0020_Principal”,”Módulo Principal”:true},
    {“fin”:”Outros_x0020_M_x00f3_dulos_x0020″,”Outros Módulos”:true},
    {“fin”:”Enquadramento”,”Enquadramento”:true},
    {“fin”:”Pr_x00ed_ncipios_x0020_de_x0020_”,”Padrões relacionados”:true},
    {“fin”:”An_x00e1_lise”,”Análise”:true},
    {“fin”:”Attachments”,”Anexos”:true,”icon”:true}
    ],
    “fieldData”:{
    “Title”:{“disp”:{“default”:”Título da Análise”},”type”:”Text”},
    “M_x00f3_dulo_x0020_Principal”:{“disp”:{“default”:”Módulo Principal”},”type”:”Lookup”},
    “Outros_x0020_M_x00f3_dulos_x0020”:{“disp”:{“default”:”Outros Módulos”},”type”:”LookupMulti”},
    “Enquadramento”:{“disp”:{“default”:”Enquadramento”},”type”:”Note”},
    “Pr_x00ed_ncipios_x0020_de_x0020_”:{“disp”:{“default”:”Padrões relacionados”},”type”:”Note”},
    “An_x00e1_lise”:{“disp”:{“default”:”Análise”},”type”:”Note”},
    “Attachments”:{“disp”:{“default”:”Anexos”},”type”:”Attachments”}
    },
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Criada em:”,”por”,”Última modificação em:”,”por”]
    }
    },
    “editFormUrl”:”/Lists/ListItemPreview3/EditForm.aspx”,
    “listGuid”:”{0C3AA996-8A78-4D26-9184-59FF37FE56F2}”,
    “listBaseUrl”:”L_Menu_BaseUrl”
    }
    };

    As you can see, I changed the names of the columns that I want to show in the preview pane (these are columns that are part of my list) and I included the GUID for my list since I’m in SP2007 and also the listBaseUrl as you said to do.

    But it’s not working. This piece of code just appears on top of my list in the page, like it’s text.

    What am I doing wrong?

    Hope you can answer.
    Thanks
    Susana

  11. Hi,

    I’m trying to get this working with DFFS v3.2.62 and I’m working with SP2007.

    In the list view form – AllItems default view – you say we must ” can set up the configuration in the HTML Form Web Part and not in the calculated columns description field”

    So in ‘AllItems.aspx’ page I included a Form Web Part in which I added the following code:

    var spjs_listItemPreviewConfig = {
    “Preview”:{
    “headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”Título da Análise”:true},
    {“fin”:”M_x00f3_dulo_x0020_Principal”,”Módulo Principal”:true},
    {“fin”:”Outros_x0020_M_x00f3_dulos_x0020″,”Outros Módulos”:true},
    {“fin”:”Enquadramento”,”Enquadramento”:true},
    {“fin”:”Pr_x00ed_ncipios_x0020_de_x0020_”,”Padrões relacionados”:true},
    {“fin”:”An_x00e1_lise”,”Análise”:true},
    {“fin”:”Attachments”,”Anexos”:true,”icon”:true}
    ],
    “fieldData”:{
    “Title”:{“disp”:{“default”:”Título da Análise”},”type”:”Text”},
    “M_x00f3_dulo_x0020_Principal”:{“disp”:{“default”:”Módulo Principal”},”type”:”Lookup”},
    “Outros_x0020_M_x00f3_dulos_x0020”:{“disp”:{“default”:”Outros Módulos”},”type”:”LookupMulti”},
    “Enquadramento”:{“disp”:{“default”:”Enquadramento”},”type”:”Note”},
    “Pr_x00ed_ncipios_x0020_de_x0020_”:{“disp”:{“default”:”Padrões relacionados”},”type”:”Note”},
    “An_x00e1_lise”:{“disp”:{“default”:”Análise”},”type”:”Note”},
    “Attachments”:{“disp”:{“default”:”Anexos”},”type”:”Attachments”}
    },
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Criada em:”,”por”,”Última modificação em:”,”por”]
    }
    },
    “editFormUrl”:”/Lists/ListItemPreview3/EditForm.aspx”,
    “listGuid”:”0C3AA996-8A78-4D26-9184-59FF37FE56F2″,
    “listBaseUrl”:”L_Menu_BaseUrl”
    }
    };

    As you can see, I changed the names of the columns that I want to show in the preview pane (these are columns that are part of my list) and I included the GUID for my list since I’m in SP2007 and also the listBaseUrl as you said to do.

    But it’s not working. This piece of code just appears on top of my list in the page, like it’s text.

    What am I doing wrong?

    Hope you can answer.
    Thanks
    Susana

  12. Of course, that was dumb.
    But it still doesn’t work. I mean,the code now doesn’t show like text above the list view but nothing happens besides that.

    I’m going to go through all your instructions step by step once again, make sure everything is as it should be including the script tags.

    If it still doesn’t work I’ll cry for help.

    Thanks

  13. Hi Alex, do you experience any slow down while it loads the list?

    I’ve noticed that as soon as I add the preview calculated column to the list, the list then slows down dramatically for the first refresh. Looking at how it’s behaving it looks like as soon as the page loads, the script kicks in for the preview but its taking a while to ‘cache or load’ the preview details. Once this has been gathered the list goes back to its normal speed but it does take around 60 seconds+ for the list to become useable once you have clicked it.

    The list itself is relatively small, we only have around 300 lines in the list, with 75 being shown on the screen at any given time.

    Do you know anyway I can look into why it takes so long for the preview to inialise? This solution is awesome but I can’t deploy it when it takes 60 seconds plus to load a list….

    I have not amended anything in your code at this stage, just the basic solution.

    Many thanks as always!

  14. Hi,

    is there a kind soul that has installed this with success using SP2007 (and also using DFFS if possible) that can step forward and explain all the steps please? 🙂

    There seems to be something I’m doing wrong and Alexander doesn’t have access to SP2007 anymore.

    Thanks
    Susana

  15. Hi Alex, I can confirm that v 1.3 has resolved the issue I was experiencing….you are a GOD!

    I have deposited some more beer time for your hard work, you truely are a SP guru! Look forward to using more of your solutions (and donating more beer time!)

      1. No thank you!! (If you get a spare minute I sent you a seperate email yesterday about a seperate issue with SPJS Charts, no rush just want to check its possibly on your busy radar)

  16. I got it to work with the default css reference

    However, I have to use internal css file so I downloaded font-awesome.css and placed in the shared documents folder which is where I placed all the JS files. It does not work with this setup. The code I use is reference below:

    I checked in the debugger (F12), I see the stylesheet loaded, but no icons or colors.

    Any ideas??

  17. Thanks Alex. Yes, I can got to work.

    What is the easiest way to change the hover icon based on other column values in the list? At this moment, I have an icon which gets overridden by loadingcirclests16.gif icon. Any thoughts?

    Also, I need to change the text color of the hover and also the calendar item text. I used the sharepointbreak blog to do this part. http://www.sharepointbreak.com/2012/09/02/creating-a-color-coded-calendar-by-category-using-js-in-sharepoint-2010/#comment-603. I am wondering if there is an easier way with this approach without using the other JS code.

      1. I changed the calculated field to be
        =””

        It is not picking up the new image for the hover. It still shows the fa-arrow-circle-o-right and fa-arrow-circle-down images.

      2. Hi,
        It is only the initial loading image that is set in the calculated column. The hovericons are set in the configuration in the description of the column. Go here: http://fontawesome.io/icons/ to find the icons you want to use, or style the icons in the hoverIcon.css section in the field description.

        Alexander

  18. Alex:

    Thanks for helping me out. There is no hovericon.css in the latest download from fontawesome. Are you suggesting to add such as file? If so, do you have a sample?

  19. I moved the description code to the HTML form web part along with calendar web part. I get an error while highlighting the icon “Please check “listGuid” and “listBaseUrl” in the configuration” along with a red triangle. I left the calculated field Preview formula untouched, but removed the description part. Any ideas?

    1. Hi,
      Sorry, I thought you tried to post a code sample in your previous comment – and this must be wrapped in a code tag.

      Back to your question:
      You have it wrong. The formula must be as it was – the only change is

      configindescription='0'
      

      to tell that the config is NOT in the description of the calculated column.

      Alexander

  20. Alex:

    This is exactly what we were looking for! Do you have any documentation on how to use the “Advanced Portion” of the configuration?

    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null

    I’m trying to pull in a multi-line text field from another list if the user hovers on the icon.

    We are using SharePoint 2010. THANKS!

    1. Hi,
      To be able to do a cross list “preview” you must add the configuration to the HTML Form Web part / CEWP in the “spjs_listItemPreviewConfig” object, and set the “editFormUrl”, “listGuid” and “listBaseUrl” to address the list you want to pull the information from.

      You must also supply the ID of the item you want to pull the info from in the calculated column in the “iid” attribute.

      =”<img iid='”&[TheColumnNameWhereTheIDIsFound]&”‘ src=’/_layouts/images/blank.gif’ fin=’CrossList’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)’>”

      * “CrossList” is the FieldInternalName of my calculated column.
      * “[TheColumnNameWhereTheIDIsFound]” is the name of the column in the current list item where the ID of the linked item is found.

      Alexander

      1. Thanks for your quick reply Alex!

        Is there a different way I can look this data up from the other list besides using the ID column? I got it to work using the method you described above, but the data that is returned doesn’t apply to the row the user is hovering on.

        Here’s what I’m trying to do:

        I have a column in my list view that has a matching column in my “cross list”. The two columns are identical. For example, both lists have the column named “standard”. My cross list is serving as a library of standards, meaning is has a list of unique standards and their description. I’d like to pull the field called “description” from my cross list when users hover on the “CrossList” calculated column. My list that contains the calculated column may contain multiple entries that reference the same standard. When I created the CrossList field you mentioned above, I get random descriptions when I hover over the calculated column in my list view.

        If that doesn’t make sense, please let me know. Thanks so much for your help!!!

      2. Hi Alex:

        Just checking to see if what I’m trying to do can be accomplished via your solution. If you’d like a few more beers, I’d be happy to buy them! 😉

      3. Hi,
        Thank you for the beer!
        This solution is not intended for connecting by other than the ID column. I can with relative ease add this to the solution, but I want to check if you have considered the vLookup solution as this will do what you ask (it will display the info inline in the list view and not on hover).

        You find the vLookup solution here

        Alexander

      4. Hi Alex!

        Thanks for responding. I did see your vLookup solution, but the field I’m attempting to “preview” is a multi-text field which takes up a lot of real estate on the page if I were to display it inline on a list view. The reason for the hover, would be to keep the information separate for maintenance purposes and up-to-date as the users scroll down the list.

        If you would like more beer to add this to your preview solution, just let me know.

        Thanks so much for your help!

  21. Hi Alex,

    I need some help with this solution. I got it to work perfect in one environment (SPS2010), but it fails in another one (SPS2010), using the same method. The error I get is:
    “The configuration is either missing or corrupt!

    TypeError:

    The configuration in the description is the same as in the other Environment, and the calculated field formula also corect, with the right GUID …
    I have uploaded the Fonts as well the scripts to the site in a Folder using SPD and referienced it correctly.
    The only changes I have done in the Environment where it does not work, is in the spjs-utility.js file and PreviewItem.js, as it comes in conflict with other customizations, JS files.
    what I have changed is: from $.fn…. to jQuery.fn…. in the spjsutility file.
    and in the PreviewItem file:
    added Jquery.noConflict();
    changed all ‘$(‘ to ‘jQuery(‘

    config:
    {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:100,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF2D2D;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:500,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”label”:true},
    {“fin”:”Attachments”,”label”:true,”icon”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “1033”:[“Created at”,”by”,”Last modified at”,”by”],
    “1036”:[“Créé le”,”par”,”Dernière modification le”,”par”],
    “1031”:[“Erstellt am”,”von”,”Zuletzt geändert am”,”von”]
    }
    },
    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null
    }

    formula:
    =”img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview’ list=’B1AAFA9B-5496-4165-8DFE-4C4DF4915FAA’ configindescription=’1′ onload=’spjs.listItemPreview.init(this)'”

    thanks for any help.

  22. Hi Alex,

    Is there any reason why when deploying this solution its not picking up some of the internal fields? I’ve checked the naming convention and they are identical, I’ve even tried removing any spaces in the columns title but I’m still getting “The field “Reference” was not found. Ensure you use the correct internal name for the field.” I have a few other fields referenced in this which are working as intended so stumped why it likes some but not others?

    I’m using SP2010 here…

      1. Thanks got it now! Is there anyway to add two entries to a line ? For example column a has a first name and column b has the second name, are we able to display both side by side? ( I’m not using names in this scenario just made it easier to give you an example)

        The title field would be the main area I want two entries to appear in however if you can make that happen in the preview window itself that would also work very well….

  23. I’ve managed to CONCATENATE the data I have but when I add the value to the ‘HeaderCss’ the preview stops working. Am I doing something wrong here? I have the right internalname for the new calculated column butl iterally as soon as I add this, the preview no longer appears (although I do get the Font Awesome icon changing when I hover over it to suggest the preview is live)

      1. Sorry yes that’s what I did, I added the new column in the fields part and this stops the preview from working. The minute I remove the line from the fields section the preview starts again. I’ve checked we are using the correct FieldInternalName

    1. Hi,
      I have updated the solution to strip away “String;#” from the beginning of the calculated string, but I could not see any reason for the script to halt when adding a calculated column.

      Could you have a typo in the argument object?

      Alexander

      1. Alex, I’ve added my calculated column using =CONCATENATE formula to join two rows into one and then use that single row on t he preview pane.

        What i get at the moment is this: string;#(M72e 449485), the information stored in the brackets is the calculated column result. Am i doing something wrong here?

  24. Hi Alex:

    Thanks for your prompt reply regarding the CrossList preview. I’m having trouble getting it to work. I’ve downloaded the latest copy of spjs-utility.js (just in case), PreviewItem.js, and updated my Calculated column, but it still fails to render. Instead it shows an error message in the task bar, “stating that an “Object is expected” in file jquery-1.10.2.js at line 723. Oddly enough the circles icons change on hover, but nothing is shown on the screen.

    The internal field name of the two column I’m trying to compare is the Title field. I had renamed both of those columns earlier on to “Std/Req”. Do you think the slash in the column title is causing Jquery to fail?

    I tried both of these formulas for the calculated columns:
    =””

    and

    =””

    1. Sorry… forgot to remove the angle brackets at the beginning and end.

      Here are the two formulas I used.

      =”img iid='”&[Std/Req]&”:”&[Std/Req]&”‘ src=’/_layouts/images/blank.gif’ fin=’CrossList’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)'”

      AND

      =”img iid=’Title:”&[Std/Req]&”‘ src=’/_layouts/images/blank.gif’ fin=’CrossList’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)'”

  25. Hi Alex:

    Thanks for your reply. I know how to find the FieldInternalName. The two fields I’m trying to compare are the title fields from two different lists. The formula you posted at the bottom of your article calls for what I think is the FieldInternalName (which in this case is Title) and the SharePoint Column name that matches from the current SharePoint list. I changed the lookup column name in my other list back to Title to ensure they both matched their FieldInternalNames. Either way the solution doesn’t seem to work. Have any other suggestions? Please let me know if more beer will help 🙂

    Charlie

      1. I’m having the same issue (I think). I have the correct icon displaying, resolved all the red triangle error messages, but can’t get the crosslist fields to display on hover.

        =”<img iid=’SortValue:”&SortValue&”‘ src=’/_layouts/images/blank.gif’ fin=’More’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)’>”

      2. DCH: Do you get any errors?

        You can try adding some alerts to the code in the function “show” in line 155 in the file “PreviewItem.js” and find where the error occurs. Move the alert down until you locate the line that fails and let me know the result.

        Alexander

      3. Alexander:

        I just sent you an email that includes the PreviewItem.js file with commented out alerts showing where the alerts fired and where they failed to fire beginning in the “show” function beginning at line 155. Please let me know if you need more information.

        Thanks!

      4. When I pull data from within the same list it works perfectly.

        When I try to pull data from another list using the iid I get a red triangle and the “You are loading the configuration from the code, but the variable ‘spjs_listItemPreviewConfig’ is missing” error.

        When I try to pull from another list by matching two columns, I don’t get the red triangle, or any other icon, or an error message.

        I have the code wrapped in script tags, its positioned above the listview, and I am referencing the previewitem.js, spjs-utility, jQuery and font files. I am using an older version of jQuery though if that matters (1.7.2)?

      5. DCH:
        When pulling from another list you must put the configuration in the HTML Form Web Part as described in “Setting up the configuration in the HTML form web part” in the article. See bottom of article for more details.

        Alexander

      6. Yes, definitely, I have the configuration moved to a HTML Form Web Part, and inside scripts tags, but get that icon and error message.

      7. Charlie and DCH:
        I have rigged a debug version of the script here

        Load it and have a list view with only a few items as this will log to the console for each line. To activate the logging, bring up the developer console (in IE) and select “Console”. Then add ?debug=1 to the url like this:
        /Lists/ListItemPreview3/AllItems.aspx?debug=1

        Load the page and hover over a selected icon to log this “query” to the console, then send me the contents of the console window.

        Alexander

      8. Alexander:

        Thanks for taking the time to make a debug version of your script. I added to a list view and send you the contents of the Console window in an email as your requested.

        Thanks for your help!
        Charlie

      9. I’m sorry… I can’t seem to get anything to print to the console. I’m referring to the debug version of the script on the list view page, I’m adding ?debug=1 to the url, I click around on the page but nothing shows up in the console except for these standard lines that appear on every page:

        HTML1204: att.com is running in Compatibility View because ‘Display all websites in Compatibility View’ is checked.
        AllItems.aspx

        SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
        AllItems.aspx

      10. That update didn’t change anything for me… I’ve gone through the setup 20 times and can’t see anything wrong. I’m going to rip it all out and start over. Its got to be an issue with my setup.

        Does the jQuery version matter? I’m calling jQuery 1.7.2 and spjs-utility (latest) in my master page, then I have the font reference, the PreviewItem.js and the var spjs_listItemPreviewConfig code on the page above the list view.

        I’ve tried the calculated column using iid/ID and also two other matching fields.

      11. DCH:
        I have to many threads going here. If you set it up fresh from the start you can send me some screenshots and a description of what you have done, whats working and whats not.

        I cannot go into to complex setups, like using it with vLookup etc.

        Alexander

  26. Alex, ignore my last, thats worked perfectly thanks, I hadn’t replaced the old Preview.js file so was getting the string# returned. Beer time will be sent across today….your a legend as always!

  27. Alexander,

    I’m trying to make this hover solution work with the vLookup solution but I can’t seem to get it to work. Here’s my scenario:

    List A – has the fields I want to display on hover over
    List B – has the calculated column that looks up the fields in List A
    List C – has a vLookup column grabbing rows from List B

    I would like the vLookup column in List C to display the column with the hover over icon from List B, which would display the content from List A. Is this possible?

    Thanks!

    1. I also tried the simpler approach of using two lists and it did not work. I got the previewitem working successfully within one list, and then tried to add that column to a vLookup in another list and I got the red triangle icon, but with no error message.

  28. Dear Sir,

    I have the following problem when applying your code (which works fine by the way).

    I have a page containing several webparts referring to different lists.

    When utlizing your code this works on the multiple lists, although when hoovering across the items on the 2nd &3rd list it displays the fields of the 1st list. Is there any way to avoid this?

    Regards
    Geert

      1. Hello,

        Thanks for quick answer, the list item from the previous list are shown under the new list.

        To explain situation:
        I have 4 lists displaying via a view webpart on a single page.
        For each individiual list I want the code to work…
        The 4 lists are unrelated.

        For some reason when hoovering above the icon
        List2, List3 and list 4 display the data from List 1

        Hope you replicate the problem or provide assistance….

        Regards
        Geert

      2. the answer your question properly the list item from the wrong list (corresponding with the ID you hover over) is shown…

        If there is no corresponding ID in the other list it displays an error please check “List GUID” etc…

        Hope this helps,

        Can you confirm it should work for multiple lists on one page?

        I have SP2010

      3. To give you the code:
        the html form webpart prior to list 1 has following code:
        var spjs_listItemPreviewConfig = {
        “Preview2”:{
        “headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “fieldData”:{
        “Title”:{“disp”:{“default”:”Title”,”1044″:”Tittel”},”type”:”Text”},
        “DateAndTime”:{“disp”:{“default”:”Date / time”,”1044″:”Dato / klokkeslett”},”type”:”DateTime”},
        “Multiline”:{“disp”:{“default”:”Multiline”,”1044″:”Flerlinje tekst”},”type”:”Text”},
        “MyChoiceCol”:{“disp”:{“default”:”Choice column”,”1044″:”Valgkolonne”},”type”:”MultiChoice”},
        “MultiUser”:{“disp”:{“default”:”Multi select people picker”,”1044″:”Flervalgs personvelgerfelt”},”type”:”UserMulti”},
        “Lookup”:{“disp”:{“default”:”Lookup”,”1044″:”Oppslag”},”type”:”Lookup”},
        “Attachments”:{“disp”:{“default”:”Attachments”,”1044″:”Vedlegg”},”type”:”Attachments”}
        },
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:”http://sharepoint.internal.erased/sites/apc/Lists/MIS%20Data/EditForm.aspx”,
        “listGuid”:”{a64657d9-2dbe-45c9-88a7-4b0db4e23939}”,
        “listBaseUrl”:”http://sharepoint.internal.erased/sites/apc/”
        }
        };

        List 1 has calculated field:=””

        the html form webpart prior to list 2 has following code:

        var spjs_listItemPreviewConfig = {
        “Preview2”:{
        “headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “fieldData”:{
        “Title”:{“disp”:{“default”:”Title”,”1044″:”Tittel”},”type”:”Text”},
        “DateAndTime”:{“disp”:{“default”:”Date / time”,”1044″:”Dato / klokkeslett”},”type”:”DateTime”},
        “Multiline”:{“disp”:{“default”:”Multiline”,”1044″:”Flerlinje tekst”},”type”:”Text”},
        “MyChoiceCol”:{“disp”:{“default”:”Choice column”,”1044″:”Valgkolonne”},”type”:”MultiChoice”},
        “MultiUser”:{“disp”:{“default”:”Multi select people picker”,”1044″:”Flervalgs personvelgerfelt”},”type”:”UserMulti”},
        “Lookup”:{“disp”:{“default”:”Lookup”,”1044″:”Oppslag”},”type”:”Lookup”},
        “Attachments”:{“disp”:{“default”:”Attachments”,”1044″:”Vedlegg”},”type”:”Attachments”}
        },
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:”http://sharepoint.internal.erased/sites/apc/Lists/SaData/EditForm.aspx”,
        “listGuid”:”{96a4c7ed-7a73-4cb5-8274-101b9b56fdff}”,
        “listBaseUrl”:”http://sharepoint.internal.erased/sites/apc/”
        }
        };

        List 2 has calculated field: =””

        * I’ve slightly changed the url so it can not be recognized

      4. I noticed the calculated field didn’t display so removed the quoutes for posting it here:

        =

        and list 2:
        =

        Hope this works and excuses for the spam

      5. list 1 has calculated field:
        =”<img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview2′ list='{a64657d9-2dbe-45c9-88a7-4b0db4e23939}’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)’>”

        list 2 has calculated field:
        =”<img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview2′ list='{96a4c7ed-7a73-4cb5-8274-101b9b56fdff}’ configindescription=’0′ onload=’spjs.listItemPreview.init(this)’>”

        hope it’s visible and that you can help, this is the perfect solution for me, but cannot apply to views on different lists (via webpart) on 1 page

      6. Hi,
        You cannot have the code in the CEWP repeating the variable

        var spjs_listItemPreviewConfig =

        and the same FieldInternalName

        Have you tried to add the config to the description field of the calculated column?

        If you want the config in the CEWP you must have unique FieldInternalNames, and you must add all the config in the same variable like this:

        var spjs_listItemPreviewConfig = {
        	"Column1":{
        		"headerCss":"",	
        		"clickToView":false,
        		// the rest of the object is removed in the example
        	},
        	"Column2":{
        		"headerCss":"",	
        		"clickToView":false,
        		// the rest of the object is removed in the example
        	}
        };

        Alexander

      7. Hello Alexander,

        1) I changed my approach to add the config to the description field of the calculated column.

        I created 2 new columns for the Preview with each a unique FieldInternalName

        The first list loads ok
        The second list keeps displaying the loading circles

        I removed the previous code for CEWP

        my code for list 1

        =”<img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview4′ list='{a64657d9-2dbe-45c9-88a7-4b0db4e23939}’ configindescription=’1′ onload=’spjs.listItemPreview.init(this)’>” for the formula and {“headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:null,
        “listGuid”:null,
        “listBaseUrl”:null
        } for the description

        my code for list 2
        =”<img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview3′ list='{96a4c7ed-7a73-4cb5-8274-101b9b56fdff}’ configindescription=’1′ onload=’spjs.listItemPreview.init(this)’>” and the following code for the description
        {“headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:null,
        “listGuid”:null,
        “listBaseUrl”:null
        }

        What am I doing wrong? Will send you a few Belgian beers for giving me a working solution 🙂

      8. Hello Alex,

        I also just tried the CEWP option again by loading the following code and putting back the configindescription=’0′

        var spjs_listItemPreviewConfig = {
        “Preview4″:{
        “headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “fieldData”:{
        “Title”:{“disp”:{“default”:”Title”,”1044″:”Tittel”},”type”:”Text”},
        “DateAndTime”:{“disp”:{“default”:”Date / time”,”1044″:”Dato / klokkeslett”},”type”:”DateTime”},
        “Multiline”:{“disp”:{“default”:”Multiline”,”1044″:”Flerlinje tekst”},”type”:”Text”},
        “MyChoiceCol”:{“disp”:{“default”:”Choice column”,”1044″:”Valgkolonne”},”type”:”MultiChoice”},
        “MultiUser”:{“disp”:{“default”:”Multi select people picker”,”1044″:”Flervalgs personvelgerfelt”},”type”:”UserMulti”},
        “Lookup”:{“disp”:{“default”:”Lookup”,”1044″:”Oppslag”},”type”:”Lookup”},
        “Attachments”:{“disp”:{“default”:”Attachments”,”1044″:”Vedlegg”},”type”:”Attachments”}
        },
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044″:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:”http://sharepoint.erased/sites/erased/Lists/erased/EditForm.aspx”,
        “listGuid”:”{a64657d9-2dbe-45c9-88a7-4b0db4e23939}”,
        “listBaseUrl”:”http://sharepoint.erased/sites/erased/”
        },
        var spjs_listItemPreviewConfig = {
        “Preview3″:{
        “headerCss”:””,
        “clickToView”:false,
        “hoverDelay”:200,
        “editInDlg”:true,
        “hoverIcon”:{
        “off”:”fa-arrow-circle-o-right”,
        “on”:”fa-arrow-circle-down”,
        “css”:”color:#FF6103;”
        },
        “dlgTitleField”:”Title”,
        “maxHeight”:400,
        “maxWidth”:600,
        “dateFormat”:”dd.MM.yyyy”,
        “fields”:[
        {“fin”:”Title”,”label”:true},
        {“fin”:”DateAndTime”,”label”:true},
        {“fin”:”Multiline”,”label”:true},
        {“fin”:”MyChoiceCol”,”label”:true},
        {“fin”:”MultiUser”,”label”:true},
        {“fin”:”Lookup”,”label”:true},
        {“fin”:”Attachments”,”label”:true,”icon”:true}
        ],
        “fieldData”:{
        “Title”:{“disp”:{“default”:”Title”,”1044″:”Tittel”},”type”:”Text”},
        “DateAndTime”:{“disp”:{“default”:”Date / time”,”1044″:”Dato / klokkeslett”},”type”:”DateTime”},
        “Multiline”:{“disp”:{“default”:”Multiline”,”1044″:”Flerlinje tekst”},”type”:”Text”},
        “MyChoiceCol”:{“disp”:{“default”:”Choice column”,”1044″:”Valgkolonne”},”type”:”MultiChoice”},
        “MultiUser”:{“disp”:{“default”:”Multi select people picker”,”1044″:”Flervalgs personvelgerfelt”},”type”:”UserMulti”},
        “Lookup”:{“disp”:{“default”:”Lookup”,”1044″:”Oppslag”},”type”:”Lookup”},
        “Attachments”:{“disp”:{“default”:”Attachments”,”1044″:”Vedlegg”},”type”:”Attachments”}
        },
        “footer”:{
        “show”:true,
        “css”:””,
        “dateFormat”:”dd.MM.yyyy hh:mm”,
        “strings”:{
        “default”:[“Created at”,”by”,”Last modified at”,”by”],
        “1044″:[“Opprettet”,”av”,”Sist endret”,”av”]
        }
        },
        “editFormUrl”:”http://sharepoint.<erased>/erased/Lists/erased/EditForm.aspx”,
        “listGuid”:”{96a4c7ed-7a73-4cb5-8274-101b9b56fdff}”,
        “listBaseUrl”:”http://sharepoint.<erased>/erased/”
        }
        };

        This generates on both list an exclamation mark with error spjs_listItemPreviewConfig is missing

        I’m eager to make this work… did I set something wrong on CEWP code?

        Regards
        Geert

      9. Oops I spotted I repeated var spjs_listItemPreviewConfig = {
        within the code, but even after removing this it gives the same error

  29. Alexander,

    I just can’t get this to work and it’s driving me mad.

    The Preview Pane will only show up for one of my items in a library. When I run the debug script, the error I get for all the other items but the one is “Unable to get value of the property ‘split’: object is null or undefined.”

    What am I doing wrong? Please help PLEEEASSEE!

      1. Hi Alexander,

        Thank you so much for the quick response. It seems like I no longer get the error when I run the debug, however I still can only see the Preview Item for only ONE ITEM on my list.

        The message I get is: “LOG: viewFields: Title,DateAndTime,Multiline,MyChoiceCol,MultiUser,Lookup,Attachments,ID,Author,Editor,Modified,Created
        LOG: ********************
        Looking up item in list: {c01969ab-cfcd-4d5b-a3cf-143f58c894c8}
        on baseUrl: “/sites/CMS-FFM/SPAdmin”
        by ID: 25
        LOG: true “

      2. Also, when I try to edit my One Item that shows the preview box by using the preview box’s edit button, I get “404 Error”

      3. Alexander,

        I was finally able to get the script working! The issue was that I had the Title field empty on all of my other items.

        If I have folders in my library, and I go one folder level down, I’ll get an error that says: “Please check “listGuid” and “listBaseUrl” in the configuration” along with a red triangle. Do you have any thoughts on how to fix this?

  30. and here is the full code of the error that I get when I am in IE9:

    “SCRIPT5007: Unable to get value of the property ‘split’: object is null or undefined
    PreviewItem.js, line 253 character 6”

    I still don’t get any preview pane but for one item

  31. I finally got this working! I don’t know what I did wrong before, or what I did to fix it, so unfortunately I can’t offer any helpful suggestions to other readers.

    I do have some feature questions though. Would it be difficult to:

    – have an option to pull the dlgTitleField property from the parent list instead of the child list?
    – have an option to turn off the edit item function completely?
    – remove the extra divs from multiline rich text fields (or whatever is making them have white space before and after the content)

    Thanks!

    1. I have added the edit button switch to v1.37. The padding issue is most likely due to a default padding of <p> tags. Use the developer console to inspect the HTML and add a style tag in the page to override whatever css style you like.

      Alexander

  32. Just a follow up from a previous post, I tested using this solution with vLookup and I couldn’t get it to work. I get the red warning triangle for the icon, but no error message.

  33. Thanks for the great solution. I have everything setup in an HTML Form Web part with a Listview but the hover dialog does not show up. There aren’t any errors being generated and all paths seem to be correct. I am running PreviewItem(1.37), JQuery 1.10.2, spjs-utility(1.182), & FontAwesome. (IE 9 browser)
    What would prevent the action from happenning? How do I enable debug? Thanks.
    Thanks.
    Michael

  34. I’ve added the code as displayed but whenever I add the configuration text to the description field of the Preview column, I get the following error.

    The configuration is either missing or corrupt!
    SyntaxError: Invalid character

    I only have 2 columns displayed called Title and Preview. The internal name for Title is “LinkTitle” and the internal name for Preview is “Preview”. I’ve used Title and LinkTitle for the “fin” field configuration value with the same result.

    The configuration code is as follows:
    {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”LinkTitle”,”label”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Created at”,”by”,”Last modified at”,”by”],
    “1044″:[“Opprettet”,”av”,”Sist endret”,”av”]
    }
    },
    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null
    }

      1. Hi,
        Sorry for the delay. I cannot see anything wrong other than maybe the quotes are the wrong type. Try using notepad and replace all “smart quotes” with proper straight quotes.

        Alexander

  35. Hi Alexander, is there a way to show a “thumbnail” picture in the dialog box? I tried using the code on a Picture Library but error always comes back with “You must have the ‘Tablular View’ turned on to use this solution.” Am I limited to only a Document Library. I’m trying to use it to show the thumbnail during the hover action.
    Thanks in advance.

  36. hey again A, I know I am missing something simple. I have a IP form Library I am trying to create this hover in. IP 2010, SP 2010. here is my formula
    =”img src=’/_layouts/images/loadingcirclests16.gif’ fin=’Preview’ list=’D3BAD876-EE1D-4753-A5F7-FB946C558614′ configindescription=’1′ onload=’spjs.listItemPreview.init(this)'”

    here is my description:
    {
    “headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “showEditBtn”:true,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Provider_x0020_Name”,”label”:true},
    {“fin”:”Service_x0020_Name”,”label”:true},
    {“fin”:”Phone_x0020_Number”,”label”:true},
    {“fin”:”_x007b_ef09065e_x002d_5b0c_x002d_469d_x002d_9ae3_x002d_ad317648cd56_x007d_”,”label”:true},
    {“fin”:”Website”,”label”:true},
    {“fin”:”PublishingContactName”,”label”:true},
    {“fin”:”Contact_x0020_Title”,”label”:true},
    {“fin”:”Contact_x0020_Phone”,”label”:true},
    {“fin”:”Contact_x0020_Email”,”label”:true},
    {“fin”:”Contact_x0020_Address”,”label”:true},
    {“fin”:”Weekly_x0020_Times”,”label”:true},
    {“fin”:”Eligibility_x0020_Requirements”,”label”:true},
    {“fin”:”Age_x0020_Requirement”,”label”:true},
    {“fin”:”How_x0020_To_x0020_Register”,”label”:true},
    {“fin”:”Eligibility”,”label”:true}

    ],

    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Created at”,”by”,”Last modified at”,”by”],
    “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
    }
    },
    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null
    }

    1. Ok, minor update. I went through the directions again and again.Finally got the red icon in my Preview cc. the error “The configuration is either missing or corrupt!” Went back in the the Preview cc and modified the description removing field data, now on load I get green circles, then they disappear and no preview window. not sure what I am missing

      1. Hi,
        Sorry for the delay. Did you figure it out or are you still having trouble?

        If you are still struggling, please try it in a plain test list with no other customizations to ensure nothing is interfering. If you cannot make it work there, send me some screenshots of the setup and I’ll take a look.

        Alexander

  37. Hi Alexander,
    I love this solution and have rolled it out over a number of my lists and libraries. But like all users, as soon as I get what I want – I want more.
    I have a column ‘PictureURL’ which I want to render as an image within the PreviewHover (rather than the text path to the image). Can you suggest a way forward for me?
    Cheers (overdue beer on its way)
    Mark

    1. Hi,
      Just an update. I’ve hacked your previously elegant script (within:”show”)to conditionally render an IMG tag for a hardcoded fieldname, but I don’t understand why I wasn’t able to do what you did – conditionally rendering the value based on the field type. My PictureURL (Picture or Hyperlink) came across as config.fieldData[o.fin].type = “text”. Anyway – thanks again – works really well.

  38. Hi
    Great Solution! Thank you.
    The position of the preview is firm and the preview can not be moved. Depending of the size and position of the preview the header sometimes is not seen.
    How can I fix this.
    Regards
    Juan

    1. Hi,
      The position is calculated based on the height and width of the page and it is intended positioned inthe “best” location.

      If your preview window is to big you must limit its size in the configurations “maxHeight” and “maxWidth” properties.

      Alexander

  39. Thanks again for this solution. It was very easy to setup on a web part page!

    Can you add the ability to style the main content table in the hover dialog with a custom css field like you do in dffs and vlookup?

    Thanks!

  40. Hey Alex,

    Awesome solution as always!
    2 quick questions:
    1. is there a way to have it key off text instead of an fa icon? I would like to display a popup when the user mouses over a text fields from the list.

    2. Can you use the same icon for the On and Off settings? doing so seems to cause the preview to quit working (when you mouse over the icon disappears and nothing happens). Goal is to just show the same icon and not change it on mouse over.

    Thanks

  41. Hi Alex,

    Is there a way to show the full text of a versioned Multi Line text field in a preview rather than just the last update?

    Great looking solution 🙂

  42. Hi Alex,

    I am trying to use the preview on a page that has multiple lists in different webparts. It works great on the first list, but when I add a preview to the second list it seems to get confused. The second list shows preview items from the first list. I assume it is because the object instance that gets created for the first list is duplicated. Any way around this?

    K

    1. Have you added the “list” attribute to the calculated column?

      ="<img src='/_layouts/images/loadingcirclests16.gif' fin='Preview' list='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' configindescription='1' onload='spjs.listItemPreview.init(this)'>"

      Alexander

  43. Hi…thanks for this useful article…i managed to apply this in my site… However how can i hide the preview column when i want to view the item? because whenever i click to view the item, the preview column is included as well.

      1. Thanks Alex for ur prompt response, i will try it later…One more thing, can u explain more on how to display item when hover in calendar view? Do i need to create the calculated column (Preview) first? then, where should i put these variable?

        (var spjs_listItemPreviewFIN = “Preview”;
        var spjs_listItemPreviewList = “{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}”;)
        FYI, i put those var in CEWP, however there is error occured when i stop editting the calendar page…tq

      2. Yes, the calculated column must be created first, then you must add the two variables to the CEWP code you add to the list view. This because the list view does not have the GUID in it out of the box.

        You must change the field name to match the calculated column you create, and the x’es in the GUID must be changed for the GUID of the list.

        If you get an error, please post it here.
        Alexander

  44. Hi Alexander,
    Thanks for the new 1.38 version. How can I display the attached picture (document)? I have been able to display the picture when it is in the list itself but not directly getting to the document. When I use “@FileRef”, it will only display the string. Is it possible to change the type in the “fields” section?
    I did see “{“fin”:”Attachments”,”label”:true,”icon”:true}” listed in the fields section but I don’t see it in the sample picture.
    Thanks.

      1. Sorry for not being clear. I wanted to show the attached document (which is a picture) in the hover preview.
        Thanks.

      2. This is not possible whiteout changing the script to render it as an image an not an anchor tag.

        I cannot help you with this right now, but if you look at the code you might be able to add this in.

        Alexander

  45. Hi Alexander,

    Is there a way of displaying all document columns without specifying each internal field name in config? Like in the old 2007/2010 solution? And maybe then filter out only the ones you don’t want?

  46. Thanks for the quick reply. I ended up using a short workflow to assign the “Absolute Encoded URL” to the list value. Everything is working just fine.

  47. Hi Alexander,

    works well in Sharepoint 2013 online
    If you use the numeric field will display the number as a text with many decimal places
    I would like to know how to format the fields in currency?

    Thanks so much

      1. Hi,
        This script pulls the value from the DB, and therefore it is a plain number and not formatted correctly. You can try using a calculated column to get the number format you want, and then display this column in the dialog.

        Alexander

  48. Alexander, thanks for this great stuff.
    It works like a charm with Chrome but when using IE8 I get the following error when clicking the icon (no problems with mouse over):

    Message: ‘tagName’ is null or not an object
    Line: 2
    Char: 73166
    Code: 0
    URI: …core.js…

    1. Hi,
      Sorry for the late reply. Which version of the solution are you using?

      You can test the BETA version (the beta was published in June…) and let me know if it does any difference.

      I have one possible fix, but I cannot reproduce the issue so Its not so easy to verify it.

      Alexander

  49. Does this script work for doc libraries? I was thinking yeah but I’m not seeing and image. I did download the font-awesome.css and into a folder for all my sites to call on the server but I must have messed it up some where… also I just thought of something I’m using jquery 1.11 does that matter?

  50. Hi there,

    Thanks for your code it’s great.

    I am having a little issue though, I have a single list (Assets) with multiple calculated columns showing different sets of information (depending on which Asset). I then put several webparts with various views onto one publishing page with Tab support .

    When I load the page only one of the iterations of the calculated columns will operate. Which one works can change by refreshing the page.

  51. I’m new to SharePoint and coding, and I attempted this code but received the error SCRIPT5009: ‘SPJS’ is undefined:

    Here is my code:

    HTML Form Web Part (all files uploaded into Doc Library):

    Calculated Field- Named “Preview”

    Description

    {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “showEditBtn”:true,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Title”,”label”:true},
    {“fin”:”Body”,”label”:true},
    {“fin”:”Preview”,”label”:true},
    {“fin”:”Attachments”,”label”:true,”icon”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Created at”,”by”,”Last modified at”,”by”],
    “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
    }
    },
    “editFormUrl”:”/sites/Departments/Audit/DesignSite/Lists/Tips/EditForm.aspx”,
    “listGuid”:“a3d3d650-cf9f-44a1-ad62-77c7487c2d2e”,
    “listBaseUrl”:”/sites/Departments/Audit/DesignSite”

    Formula

    =””

    Thanks in advance for any help you can provide!

  52. Hi Alexander

    I like your solution but I have trouble implementing it on my SP 2013. The loading circle icon is on the preview column but when I hover with the mouse the arrow is changing but no preview window is showing.
    This is the html code from the content editor web part (I tried also with html form web part)above the list:

    The calculated column:
    Description:

    {“headerCss”:””,
    “clickToView”:false,
    “hoverDelay”:200,
    “showEditBtn”:true,
    “editInDlg”:true,
    “hoverIcon”:{
    “off”:”fa-arrow-circle-o-right”,
    “on”:”fa-arrow-circle-down”,
    “css”:”color:#FF6103;”
    },
    “dlgTitleField”:”Title”,
    “maxHeight”:400,
    “maxWidth”:600,
    “dateFormat”:”dd.MM.yyyy”,
    “fields”:[
    {“fin”:”Name”,”label”:true},
    {“fin”:”Monat”,”label”:true},
    {“fin”:”Jahr”,”label”:true},
    {“fin”:”Attachments”,”label”:true,”icon”:true}
    ],
    “footer”:{
    “show”:true,
    “css”:””,
    “dateFormat”:”dd.MM.yyyy hh:mm”,
    “strings”:{
    “default”:[“Erstellt”,”von”,”Geändert”,”von”],
    “1044”:[“Opprettet”,”av”,”Sist endret”,”av”]
    }
    },
    “editFormUrl”:null,
    “listGuid”:null,
    “listBaseUrl”:null
    }

    And the formula (the list ID is only an example):

    =””

    Can you please help me.

    Kind regards

  53. There are some error (translated from german):
    On Internet Explorer:
    HTML1512: End labeling without correspondence.
    AllItems.aspx, Line 60, sign 2
    HTML1514: Additional „“ marker found. Per document only one „“ marker should be present.
    AllItems.aspx, Line 61, sign 1
    SEC7115: The formats: „:visited“ and „:link“ only differ by color from each other. Some formats have not been applied to „:visited“.
    On Firefox:
    Mutation-events should not be used. Use the mutation-observer instead.

  54. Hi Alex,

    This solution works great. Just an FYI, I edited the PreviewItem.js file and added the following lines to cleanup the display of a managed metadata column (just copied what you had for calclulated columns):

    case “taxonomyfieldtype”:
    val = rVal.split(“;#”)[1];
    break;

    Thanks again!
    Brent

  55. Good day. As always, this works great! For me, I created everything and got the red error that a few people here got. I deleted the field and re-added. everything exactly the same as I copied and pasted from text file but for some reason it worked the second time. Cache? who knows. Very awesome!

  56. It works great! One Question: I have many fields to be displayed in the pop up, hence scroll is enabled but as soon as mouse is moved out of the arrow icon, pop up disappers so Im not able to scroll and view the fields. Please help

  57. Thanks for the reply. However, managed metadata column display comes with (;#), I have tried Brent’s fix but doesnt seem to work 🙁

    1. Hi,
      I don’t have this currently set up so I cannot test it, but you can try to open the file “PreviewItem.js”, and locate these lines:

      switch(config.fieldData[o.fin].type.toLowerCase()){
      	case "user":
      	case "usermulti":
      	case "lookup":
      	case "lookupmulti":

      add two more cases like this:

      switch(config.fieldData[o.fin].type.toLowerCase()){
      	case "user":
      	case "usermulti":
      	case "lookup":
      	case "lookupmulti":
      	case "taxonomyfieldtype":
      	case "taxonomyfieldtypemulti":

      Does this help?

      Alexander

  58. Hi Alex,

    I’ve tried to add your solution in a calendar view, that unfortunately doesn’t seem to work, nothing’s showing up, and if I hover over the title/item I can’t see any dialog or hover over menu. How should it actually work here?

    I’ve also added it to the same calendar but at a least view, works like a charm.

    Any idea why it doesn’t work with a monthly calendar view? I’m using SharePoint 2013.

    1. Added all files to a library.
    2. Created the Preview Column.
    3. Added the configuration into the description field of the preview column.
    4. Added a CEWP to the page and added all references as well as the two variables.

    I’ve tried to debug your PreviewItem.js but wasn’t able to figure out what it’s suppose to do.

    Thanks in advance for your help.

    Best regards,
    Daniel

    1. Hi,
      Calendar views are complex, and it may have changed in SP 2013 since I last tested it. Try setting it up in a plain list view to ensure you have the config right.

      Also look at the developer console (hit F12 > Console) and see if you find any errors there.

      Alexander

      1. Hi Alex,

        works fine with the plain list, just doesn’t work with the calendar view, the developer console unfortunately doesn’t show/throw any errors, tried that already.

        Any other idea or approach to suggest?

        Thanks,
        Daniel

  59. Hello Alex-
    Thank you so much for this solution. I can’t make it work however. I get the spinning circle for the preview but the image doesn’t load so no idea if i’ll even get the preview.

    So, the only files that I have downloaded are those listed here PreviewItem.js, font-awesome-4.4.0, spjs-utlity.js, jQuery-ui-1.11.4.custom, and I do have the jQuery-1.10.2.js but it doesn’t consist of the whole pack….am i going to need to download the older files? PreviewItemOnhover.js or if the PreviewItem.js file replaces that?

    I have jQuery-ui-1.11.4.custom but not sure if also need the jQuery-1.10.2.js? I’m thinking the 1.11.4 will work as long as I called it from the Form Web Part?

    Thanks for any help. My head is spinning, just like that Preview Circle 🙂

      1. This would indicate that you have an error in the script reference to the file “PreviewItem.js”.

        Correct the link to the file, or If you have it placed below the list view, you must move it above.

        Alexander

      2. It’s exactly like you said.

        I was able to make it work, however, I had to assign the links to those files on the page itself (in a Script Editor WP), the one in form does not seems to work anymore.

  60. We have a number column, 0 decimals. Number 40 is displayed as 40.0000000000000. Someone who can help us formatting this in the hover to just show 40? Otherwise we have to change the column to text which is not ideal.

  61. Hi Alexander,

    really appreciate your script but unfortunately not working for me. I’m sorry that my knowledge is not so thorough but I will try to describe my situation as best as possible.

    I’m using SharePoint Foundation 2013 and didn’t indicate any problems with Java script previously.

    I’ve followed your guidelines and applied “HTML Form web part” just above the Training Calendar view and All Events view adding hyperlinks to .js. as per below into source editor.

    Then I’ve created Calculated column “Hover” and add formula
    =””
    Also add the setup into description as you mentioned in the guideline.

    Unfortunately nothing happened when hovering in both views.
    I’ve updated following two lines in “PreviewItem.js” as well but nothing happened.

    of spjs_listItemPreviewFIN = “Hover” ? spjs_listItemPreviewFIN : null;
    list = typeof spjs_listItemPreviewList = “{3769c806-b723-41bd-831d-473264b2532a}” ? spjs_listItemPreviewList : null;

    Could you please advise what I’ve missed to do?

    Thanks a lot
    Vojta

  62. Hi Alex, This was working fine. But I just renamed the field’s display name from “Preview” to “Details” and it has stopped working. Getting only green circles now. Please help ASAP!

  63. Hi, I’m getting the following error on IE11 when I mouse over the arrows:

    Unable to get property ‘split’ of undefined or null reference
    File: PreviewItem.js, Line: 259, Column: 6

Leave a Reply