Introduction

This article shows how to preview a listitem on a hover using simple jQuery and a calculated column. Many SharePoint2013 users are expecting this kind of small and interesting feature. I hope this one will help all of you.

Prerequisites

  1. Calculated Column (here I have used the Column name Preview).

  2. Add Jquery-1.11.2.js and spjs-utility.js files to the site assets library.

  3. PreviewItem.js This is our Important file to display the content in dialog box preview method. This is the reusable code downloaded from Preview Item.

  4. Page preview.js this is our final code JavaScript file that all the fields need to be displayed in the page.

Procedure

Create a Calculated Column in your Custom List. Here I named it ”Preview”.

Then add the following code to the Description box of your calculated column.

Description box Code

  1. {"headerCss":"",
  2. "clickToView":false,
  3. "hoverDelay":200,
  4. "showEditBtn":true,
  5. "editInDlg":true,
  6. "hoverIcon":{
  7. "off":"fa-arrow-circle-o-right",
  8. "on":"fa-arrow-circle-down",
  9. "css":"color:#FF6103;"
  10. },
  11. "dlgTitleField":"Title",
  12. "maxHeight":400,
  13. "maxWidth":600,
  14. "dateFormat":"dd.MM.yyyy",
  15. "fields":[
  16. {"fin":"Title","label":true},*****here you have to enter the coulmn name to be displayed in the previewi item(enteer the internal field name from sharepoint list)
  17. {"fin":"Descrption","label":true}**********Don’t copy the lines enterd by red font.Jus for understading purpose
  19. ],
  20. "footer":{
  21. "show":true,
  22. "css":"",
  23. "dateFormat":"dd.MM.yyyy hh:mm",
  24. "strings":{
  25. "default":["Created at","by","Last modified at","by"],
  26. "1044":["Opprettet","av","Sist endret","av"]
  27. }
  28. },
  29. "editFormUrl":null,
  30. "listGuid":null,
  31. "listBaseUrl":null
  32. }
Add the following code to your Formula box:
  1. ="<img src='/_layouts/images/loadingcirclests16.gif' fin='Preview' list='efae4942-1474-4565-a833-807fb5910dfd' configindescription='1' onload='spjs.listItemPreview.init(this)'>"

List=’Copy your List id’

And the screen will look like the following. Save this column.



Go to the SharePoint List and edit the page then select Add CEWP then click the Final script file link.Here I named it page Preview.

Final Code

  1. //Reference Files
  2. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  3. <script type="text/javascript" src="https://thegowtham.sharepoint.com/sites/TS/SiteAssets/jquery-1.11.2.js"></script>
  4. <script type="text/javascript" src="https://thegowtham.sharepoint.com/sites/TS/SiteAssets/spjs-utility.js"></script>
  5. <script type="text/javascript" src="https://thegowtham.sharepoint.com/sites/TS/SiteAssets/PreviewItem.js"></script>
  7. //Final script
  8. <script type="text/javascript">
  10. var spjs_listItemPreviewConfig = {
  11. "Preview":{
  12. "headerCss":"",
  13. "clickToView":false,
  14. "hoverDelay":200,
  15. "showEditBtn":true,
  16. "editInDlg":true,
  17. "hoverIcon":{
  18. "off":"fa-arrow-circle-o-right",
  19. "on":"fa-arrow-circle-down",
  20. "css":"color:#FF6103;"
  21. },
  22. "dlgTitleField":"Title",
  23. "maxHeight":400,
  24. "maxWidth":600,
  25. "dateFormat":"dd.MM.yyyy",
  26. "fields":[
  27. {"fin":"Title","label":true},// Title Column Internal name
  29. {"fin":"Descrption","label":true} //Description Column Internal name
  31. ],
  32. "fieldData":{
  33. "Title":{"disp":{"default":"Title","1044":"Tittel"},"type":"Text"},//Title Column Internal name and type
  36. "Descrption":{"disp":{"default":"Multiline","1044":"Flerlinje tekst"},"type":"Note"} //Description Column Internal name and type
  39. },
  40. "footer":{
  41. "show":true,
  42. "css":"",
  43. "dateFormat":"dd.MM.yyyy hh:mm",
  44. "strings":{
  45. "default":["Created at","by","Last modified at","by"],
  46. "1044":["Opprettet","av","Sist endret","av"]
  47. }
  48. },
  49. "editFormUrl":"/Lists/Preview/EditForm.aspx",
  50. "listGuid":null,
  51. "listBaseUrl":null
  52. }
  53. };
  54. </script>
After adding the preceding script save the web part and refresh the page.

Note: If you are adding other column types then use this.

Check the output



Reference : SPJSBlog