Introduction

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.

Solution

The solution uses client-side rendering to override the output that the field displays in a list view. This is achieved using a list template override to change the Attachment’s field rendering. The solution makes use of the SharePoint Callout Manager which is used to display links to the attachment. I found a set of articles which have been posted in the Resources section below really good for getting to grips with using the Callout Manager. The implementation works on both SharePoint 2013 and SharePoint Online. The one issue with the approach is that you have to reference the JavaScript file for each view, so if you create a new view then that view needs to be setup. This isn’t a problem if you are creating a custom list with a schema.xml as you can reference the JavaScript in the list’s schema. The solution makes use of the SharePoint 2013 JSOM API and the list of attachments is only created one the user has clicked on the paperclip icon to see the list of attachments. This is to try and keep the load down on the server when there are lots of attachments for a particular list item.

Resources

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

http://www.learningsharepoint.com/2013/05/09/sharepoint-2013-callout-popup-tutorial/

SharePoint 2013 – Custom CallOut with File Preview – Obilogic

http://msdn.microsoft.com/en-us/library/office/dn268594(v=office.15).aspx

Setup

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

An updated version of the script has been released to add support for the Minimal Download Strategy feature. This helps to reduce the number 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

An updated 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

I did not do enough testing. An issue was discovered by Ken. This is related to when having multiple list view web parts on the page.

Update 22nd January 2016

There still seemed to be an issue with MDS and the control was polluting the global JavaScript pool, this update fixed those has been tested on SharePoint Online.

Download:
ITSP.SP.AttachmentField-20160122.zip