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.
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)'>"
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:
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.
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.
Download the file “spjs-utility.js” from here. Ensure you get the latest version.
Get jQuery from here. Use v1.10.x as the 2.x series in not compatible with IE below 9.
Get the code for the file “PreviewItem.js” from here. Ensure you get the latest version.
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.
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)'>"
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
}
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”.
- 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]
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.
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.
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>
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
hi & thanks
i have an error (take a look @ http://tinypic.com/view.php?pic=oi9b90&s=5 )
i get this error :
You are loading the configuration from the code, but the variable “spjs_listItemPreviewConfig” is missing.
help me please
Hi,
I cannot see the image – the link is not to a specific image.
Alexander
but i can !
http://tinypic.com/view.php?pic=oi9b90&s=5#.UqBMCsQW3Ec
——————–
try this one : http://picup.ir/di/6J35/Err.png
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
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?
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
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
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
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…?
Any errors in the developer console (hit F12 > Console)?
Alexander
Great post. I was able to get it to work the first time I tried these great instructions. Thanks!
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.
Which version of SharePoint are you using? Send me some screenshots of the configuration (CEWP code and calculated column) and the error message. You find my email in the “About me” tab.
Alexander
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?
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
}
Hey,
your solution looks great – but nothing happend on my site.
Please help me 😉
I have send you a mail with a screenshot of my site.
Greets Matthias
Are you sure you have set the “output format” for the calculated columm to “Number”?
Alexander
Yes the “output format” is “Number”.
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???
There is a bug regarding reading the configuration from the description field when using this in a list view web part. I will post an update later tonight.
Alexander
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.”
Updated to v1.1 to support list view web parts outside the list itself (web part pages).
Alexander
Hey Alexander,
your solution is perfect 😉
Is it possible to change the label of the box?
i don´t want the title at the label… i want a other field as label!
Greets Matthias
Yes, but you will have to manually change it in line 198. I’ll see what I can do about making this a configurable option in the next release.
Alexander
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”
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
Perfect thank´s 😉
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
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.
Hi,
I need to see the formula. Remove the angle brackets and repost it.
Alexander
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.
You must change the x’es with the guid of your list.
Alexander
Thank you for this wunderfull tool!!
It works like a charm.
Patrick.
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.
I’ll fix it in the next release.
Alexander
Hi Alexander,
is it possible to show also attachments?
Patrick.
I’ll see what I can do in the next release.
Thank You !! 😉
You’re welcome,
Alexander
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
I posted the formuls also but it is displaying blank. I just changed the GUId and rest was as it is.
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});
Sorry for the late reply. I guess you are missing a reference to spjs-utility.js.
Alexander
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.
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
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”
}
Hi,
To be able to help, you must send me some screenshots of the calculated column and the error message.
Alexander
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!
Hi,
Check the script reference as you probably have an error there. The font is “installed” automatically by referencing the CSS file.
Alexander
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)
Hi,
The path to the loading circle is set in the calculated column. You can use any picture you like here.
Alexander
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?
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
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
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
You must wrap the code in script tags for it to be interpreted as code.
Alexander
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
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!
Furthermore we are using IE8 and SP2010…
I will look into it.
Alexander
As always, many thanks! More beer time coming your way if you can fix 🙂
This should be fixed in v1.3 – can you confirm?
Alexander
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
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!)
Thank you for the beer!
Alexander
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)
I am getting this error. I am using the calenderview
Error: Unable to get property ‘hoverIcon’ of undefined or null reference
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??
If you want to load fontawesome locally you must add all the files from the font awesome downloaded package to your document library.
Alexander
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.
The loadingcirclests16.gif image is set in the calculated column – change it if you like.
I cannot help you with the color coding, sorry.
Alexander
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.
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
Alex,
The same code does not work on web part view. I am using the GUID and everything. Any thoughts?
Thank you
Malathi.
Which version of SharePoint are you using?
Alexander
2013
I need screenshots to see how you have set it up – both the calculated column and any other relevant info. You find my email in the “About me” tab in the top of this page.
Alexander
It is on your way
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?
Hi,
What I refer to is the configuration made in the description of the calculated column – as described in this article. If you look at this, you will find the hoverIcon part of the config.
Alexander
Alex,
Thank you for the prompt response and the patch update post. The patch fixed the calendar web part issue.
Malathi.
Regarding the “Setting up the configuration in the HTML form web part”, do I put this within script tags? Does it work with the calendar web part?
Yes and yes.
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?
You must change the calculated column to specify that the setup is not in the description.
Alexander
I have it as
=””
I still get the error.
Wrap the code in <code></code>
You mean in the calculated field? I have the description value wrapped around tag. Otherwise, I see the description in the web part.
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
to tell that the config is NOT in the description of the calculated column.
Alexander
That is what I have, I can send you tomorrow if want
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!
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
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!!!
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! 😉
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
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!
Hi,
I have updated the solution to support your scenario. Look at the bottom of the article for details.
Alexander
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.
Hi Alex, ignore my post, I solved it. I uploaded again all the files and somehow worked 🙂
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…
Ensure you have the correct fieldinternalname – look here to learn how to find it: https://spjsblog.com/general-tips/
Alexander
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….
Could you use a calculated column that concatenates the two fields into one and then use this in the preview?
Alexander
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)
Not sure what you man by adding it to “HeaderCss” – you must add the field to the “fields” part of the configuration object using its FieldInternalName. Look here to find the FieldInternalName: https://spjsblog.com/general-tips/
Alexander
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
OK – I’ll have to look into it. This may take a few days I’m afraid. Let me know if you sort it out before I get back to you.
Alexander
Thanks Alex, whenever you can. More beer time coming your way as usual. Again thanks for all your assistance so far.
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
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?
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
=””
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)'”
This is not a valid FieldInternalName – look here to learn how to find the FieldInternalName
Alexander
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
Hi,
Thank you for the beer, I will look at this as soon as I can manage.
Alexander
Hi,
I sent you an email.
Alexander
Alexander:
I received it and replied.
Thanks for your help!
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)’>”
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
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!
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)?
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
Yes, definitely, I have the configuration moved to a HTML Form Web Part, and inside scripts tags, but get that icon and error message.
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
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
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
This sounds strange – are you 100% sure you refer the correct version? – try adding an alert to it to confirm it.
Alexander
Yes, alert showed when I loaded the page…
And you are certain the f12 window is looking a the correct browser window?
Verify that the version number is 1.34 in the file.
Alexander
Yes to both… did “Charlie H” get different results?
DCH;
Can you test v1.36?
Yes, Charlie H got his issue sorted in v1.35.
Alexander
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.
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
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!
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!
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.
Hi,
I have not tested using this with vLookup and cannot tell whether or not it will work, sorry.
Alexander
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
Hi,
Is it the correct list item, but the wrong selection of viewfields, or is it actually the list item from the wrong list (corresponding with the ID you hover over) that are shown?
Alexander
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
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
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
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
Wrap the code in tags like this:
<code>
// code here
</code>
Alexander
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
Hi,
You cannot have the code in the CEWP repeating the variable
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
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 🙂
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
Oops I spotted I repeated var spjs_listItemPreviewConfig = {
within the code, but even after removing this it gives the same error
Hi Geert,
Can you test v1.36?
Alexander
Hi Alexander,
This solution worked perfectly, beer coming your way….
Regards
Geert
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!
Please send med the error message with reference to line number in the script.
Alexander
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 “
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”
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?
I’m glad you figured it out. I’ll make a note of the folder issue and see what I can do during the weekend.
Alexander
This should be fixed in v1.37 – can you confirm?
Alexander
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
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!
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
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.
I don’t think you can use this with vLookup.
Alexander
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
Got everything worked out. It turns out that there was too much going on in the page.
Thanks again for your solution.
Hi,
I’m glad you figured it out. I have not had the time to answer you before as I have quite a backlog of email to go trough.
Alexander
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
}
Any clue on what may be the problem?
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
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.
Hi,
I have not tested it, but this solution will only work if you have a list view with the checkboxes in front of the list items (the “Tabular view”).
Alexander
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
}
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
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
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
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.
Hi,
Sorry for the late reply. I have updated to v1.38 and added support for Hyperlink or Picture fields.
Alexander
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
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
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!
Hi,
I have added an ID attribute to the main table in v1.38. Look at the change log in the top of the page.
Alexander
Still blank tool tip on mouse hover,, im not using the image instead i used the month calendar view please advise
Hi,
Calendar views can be tricky. Try setting it up in a plain list view first to ensure it works, than try to adapt it to a calendar view.
Alexander
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
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 🙂
Sorry, but this is not possible in the current version.
Alexander
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
Have you added the “list” attribute to the calculated column?
Alexander
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.
Hi,
You can for example use this solution for SP2007: https://spjsblog.com/2010/03/30/edit-sharepoint-field-properties-including-lookup-column-list-association-with-client-side-code-only/
Or this one for SP2010-13:
https://spjsblog.com/2014/03/26/edit-sharepoint-field-properties-in-sp2010-and-sp2013/
Set the “ShowInDispForm” to false.
Alexander
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
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
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.
Hi,
I’m not sure I understand. Do you want to preview the image, or list the attachments to be able to click them to open?
Alexander
Sorry for not being clear. I wanted to show the attached document (which is a picture) in the hover preview.
Thanks.
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
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?
No, this is not possible.
Alexander
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.
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
Hi Alexander,
Can you help me to solve the problem?
Thanks
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
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…
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
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?
Hi,
Do you get any errors in the developer console (hit F12 > Console)?
Alexander
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.
Hi,
Sorry, but I cannot point out why this is not working. It might be an issue with using the same list view multiple times. Does it work if you disable the tabs?
Alexander
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!
Hi,
Sorry for the delay. It sounds like you have something wrong in the link to the js-file.
Alexander
Thanks for the reply. Just a follow-up, do I include the full url (starting with https) of the Sharepoint document library where I put the files?
You can use the full URL if you do not have an alternate URL you access the site from.
I tend to use a relative URL like this:
Full page URL = https://contoso.com/Sites/DocLibrary/MyFile.js
Relative URL = /Sites/DocLibrary/MyFile.js
Alexander
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
Any errors in the developer console (hit F12 > Console)?
Alexander
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.
Sorry, but these errors are not related to this solution. It is hard to tell what could be wrong without looking at your site “hands on”.
Alexander
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
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!
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
If you click the icon instead of hover, the pop up stays visible.
Thanks for the reply. However, managed metadata column display comes with (;#), I have tried Brent’s fix but doesnt seem to work 🙁
My MMD column is only a single select. If you happen to have a multi-select MMD, that might not work on it.
Could you please let me know how to fix it for a multi select MMD column?
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
Thanks a ton Alexander, that helped 🙂
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
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
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
I’m sorry, but I don’t think I can help you further here as I’m fully occupied with work on DFFS and simply cannot find the time.
Alexander
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 🙂
Hi,
The files should be OK. Do you see any errors in the developer console (hit F12 > Console)?
Alexander
Facing similar situation, getting error in F12 about ‘spjs’ undefined 🙁
function onload(event)
{
spjs.listItemPreview.init(this)
}
‘spjs’ is undefined
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
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.
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.
Hi,
Try creating a calculated column in your list with a formula like this (output single line of text):
This will create a “text value” and not a number – use this new column in the preview.
Alexander
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
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!
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
It seems this line refers to the “dlgTitleField” – ensure your configuration has this field set up.
Alexander
working now, thank you!
Hi Alex,
Many thanks for the solution, but unfortunately it doesn’t work for me. I did add all references with the same version which you used(also tried with latest version). I am using sharepoint 2010. couldn’t see the image but can see green circle in the preview column.
When debugged I get the below error.
SCRIPT5009: ‘spjs’ is undefined
AllItems.aspx, line 947 character 1
SCRIPT5009: ‘spjs’ is undefined
AllItems.aspx, line 947 character 19253.
and few other exceptions.
Calculated column formula:
=””
Description Field:
{“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}
],
“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
}
Please help me with this. Thank you.
sorry Alex, the calculated column holds the below value.
=””
Hi,
The error “spjs is undefined” tells me that you are missing a script reference. Ensure you have the correct path to “spjs-utility.js” and to “PreviewItem.js”.
PS: angle brackets are trimmed away in the comments. You don’t have to post the calculated column formula, but next time you can change then and user “& lt;” (without the space – had to have it there to avoid it being shown as < and >) for left bracket and “& gt;” for right.
Alexander
Many Thanks Alex, it did worked with the version v1.181 of spjs utility file . Thanks a ton. Sorry for delay in relply, couldn’t access the system during the weekends.
Hi Alex,
The solution works fine, but have few questions
1.Is there a way to hover on existing column rather than using a image. For eg: my list have column called status and description. In a view i’m just trying to add the status and need the description value while hovering on it.
2. when i try to view the list in mobile it doesn’t show the hover or the icons. Is there anything needs to be changed while trying with mobile view
Thanks in advance.
I’m sorry, but I don’t have time to make changes to this solution. You are however free to use it and modify it to fit your needs.
Best regards,
Alexander
this is absolutely perfect for what I needed!!! thank you! I do however have one small, odd issue that I was wondering about. I am pulling in a text field called Category Item in place of Title it works fine EXCEPT when someone uses a comma in that field at all. If a comma is added it cuts off everything before the comma in the callout. I have combed through the scripts but have been unable to find the issue.
Hi,
I’m glad you found it useful. It’s been a while since I looked at this solution, but if you look at the script and search for
switch(config.fieldData[o.fin].type.toLowerCase()){you can try to add some “console.log” or “alert” in the code to look at the values pulled from the list items to see if you spot the error.
Alexander
Greetings!
Works well in SharePoint Online in 2018, but I used CSR instead of calculated column. Below is my code.
Alex, do You support “Appended comments” in Your feature, or I could see only last added multiline comment?
—
SP.SOD.executeFunc(“clienttemplates.js”, “SPClientTemplates”, function() {
function getBaseHtml(ctx) {
return SPClientTemplates[“_defaultTemplates”].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
}
function init() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
“Preview”: {
View: function(ctx) {
return “”;
},
EditForm: function(ctx) { return “”; },
DisplayForm: function(ctx) { return “”; },
NewForm: function(ctx) { return “”; }
}
},
},
ListTemplateType: 100
});
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens(“~siteCollection/Style Library/preview_csr.js”), init);
init();
});
—
html tags were eaten. There is image tag in View function:
—
View: function(ctx) {
return “{img src=’/_layouts/15/images/loadingcirclests16.gif’ fin=’Preview’ list=’23301b3d-dba3-4b2b-8e43-cca2a1cd78c1′ configindescription=’1′ onload=’spjs.listItemPreview.init(this)’}”;
},
—
Hello,
I am trying to make it work in sharepoint online. But with no success.
Your code displays gif animation and than error icon.
1. I have added links to jquery, css, previewitem and spjsutility to the page
2. Created js file with configuration
3. i have added your script to the page (with link to configuration).
Is the procedure OK, or am I missing some point?
Hi,
Sorry, but It won’t work on SP Online because they removed the option to render a calculated column as HTML.
Alexander
Hi,
it works with Genady suggestion from previous post. Tested on SharePoint online.
Pavel
I used to be able to get this to work fine but cant any longer and it is really neat. The field gives the spinning loading icon then goes blank. If I hover over the blank area I get config missing error.
Calculated column returning as 0
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},
],
“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
}
Calculation
=””
HTML Form Web part
http://contoso.com/sites/WF-Compliance/Scripts/jquery-1.10.2.js
http://contoso.com/sites/WF-Compliance/Scripts/spjs-utility/spjs-utility.js
http://contoso.com/sites/WF-Compliance/Scripts/PreviewListItem3/PreviewItem.js
Error:
Bad or missing config. I read through all of the other comments and have tried literally everything I can think of if you ever get around to this I would appreciate your input.
Not sure what could cause it to stop working, but this being a 7 year old solution It might very well be an update to SharePoint that makes it stop working.
I haven’t used it myself for many years and if yours just stopped I’m afraid it’s not much I can do about it.
PS: I changed the links in your script files so you don’t reveal the URL.
Alexander