Update: 22nd January 2016 – Further updates to fix an issue with Minimal Download Strategy (MDS) and works correctly when used in multiple list view app parts on the same page.
Recently I had a client that wanted a better way to get to the attachments that were linked to a SharePoint list item from a list view web part. This request had me thinking and I didn’t think it would be too difficult to achieve using SharePoint 2013’s Client Side Rendering (CSR) user interface components. Anyway one night I decided on an approach and put the following together.
The following websites provided a great resource in getting the Callout Manager and SharePoint JSOM working. http://blog.alexboev.com/2012/07/custom-callouts-in-sharepoint-2013.html
SharePoint 2013 – Custom CallOut with File Preview – Obilogic
Watch the video showing you how to setup the attachment viewer.
To take advantage of the list attachment viewer and set it up for a particular list view, do the following:-
- Download the zipfile, found at the bottom of the post
- Unzip the zip file to extract the ITSP.SP.AttachmentField.js file.
- Upload the ITSP.SP.AttachmentField.js into a suitable location, I would suggest the Site Assets library.
- Create a folder called Scripts within the Site Assets library
- Upload the ITSP.SP.AttachmentField.js into this folder, this keeps your content organised.
- Alternatively you could package up the JS file to deploy the files by using a Module into a site collection.
- Browse to the SharePoint list that you wish to enable the viewer on.
- Make sure that the list has the Attachment field showing as this is the column that is going to be overridden
- Click “Edit Page”
- Click on the List Viewer Web Part, choose Edit Web Part
- The web part properties will appear on the right hand side
- Expand the miscellaneous section
- In the JSLink field type in the location of the ITSP.SP.AttachmentField.js file
- E.g ~site/SiteAssets/Scripts/ITSP.SP.AttachmentField.js
- Use the ~site token to substitute for the local site url
- Click Apply
- Click Ok
- Save the Page
Now create a list item and add some attachments to it. When you click on the paperclip icon you will get a callout which will display all the attachments for that list item. Please let me know if you find it useful, I have tested the script with 5/6 attachments, it should scale with 20 or so documents as the list of documents is built each time you click on a particular document.
Update 21st May 2014
A new version of the script has been released to add support for the Minimal Download Strategy feature. This helps to reduce the amount of bytes being downloaded to the client. For more information please read this MSDN Blog Post.
The behaviour that you would start seeing is that the attachment callout would appear once and then never again. More information can be found here:-
Update 17th November 2015
A new version of the script has been released to add support for being used in multiple list view app parts on the same page.
Please use this version instead.
Thanks to Dar for reporting this issue.
Update 4th January 2016
It seems that I did not do enough testing and a further issue was discovered by Ken when having multiple list view web parts on the page.
Update 22nd January 2016