UPDATE February 13th, 2014: An even newer version is now available which you can check out here.
Another requirement of one of my users is to open file attachments directly by clicking on the paperclip icon without the detour of opening the item first. Alexander Bautz from spjsblog.com wrote the perfect script for this purpose which you can find here on his blog post. Thanks for that!
However, the last update was from mid 2012 and therefore the latest version is not compatible with SharePoint 2013. I made some minor adjustments to the code to restore the compatibility and I added a fade-in and fade-out animation, as well.
And here is how it will look like:
All you have to do is uploading this script to the Style Library (or any other document libary, SVN or the Hive ) and putting the following snippet into a CEWP or Script Editor Web Part on the page where you want to to have this functionality.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="..location of the script here../ListAttachments.js"></script>
<script type="text/javascript">
var argObj = {hideIdColumn:true,
clickToOpen:false,
clickMouseover:'Click to open',
oneClickOpenIfSingle:true};
</script>
Please note: To make this script work, your list view has to have the ID column as well as the attachment column visible.
The four options you can see in the snippet above are as follows:
- hideIdColumn: Defines whether the ID column will be hidden or not
- clickToOpen: Defines whether you have to click in the paperclip in order to see the list of attached files or not
- clickMouseOver: Defines the text in the tooltip when you hover your mouse over the paperclip
- oneClickOpenIfSingle: Defines if an attachment is directly opened or not if it is the only attachment of the list item
Have fun with the script!
UPDATE February 12th, 2014: There was a small error in the script. Please download the script again if you have downloaded it before February the 12th, 2014. Alternatively you can fix the script yourself:
- Normal version: Replace line 24 with ‘var argPlaceholder;‘
- Minimized Version: Insert a space in line 23 at column 5263
Download: Click Here
Hi. I am trying to use this script on our SharePoint 2013 site, and I’m not having much luck so far. I have uploaded the listattachment files to my site asset library, along with jquery.
I created a new page, and put the list webapp at the top of the page. I then put your snippet into a script editor under the list with attachments, with both script sources pointed to the correct location. The behavior on the paperclip doesn’t change, it remains “unclickable”.
I have the attachment column and the ID column both visible in the current view as well.
We are using SharePoint 2013 Online (hosted by Microsoft) if that makes a difference.
Any suggestions?
Hi Michael,
thanks for your comment. You are absolutely right, for some reason one space-character was missing in line 24 of the script and the execution stopped there.
Please change ‘varargPlaceholder;’ into ‘var argPlaceholder;’ or download the script again. It should definitely work then.
I am curious why I have no thumbnail icon for pdf file type. Other icons seem to work correctly. The pdf file type does have an icon present in document libraries.
figured it out, thanks. I needed to change the path to src='/_layouts/15/images/ic" + item.ext + ".png'
works fine now.
Hi there,
I am very glad to have come across this. However I have some questions:
1) I am having difficulty getting the click to open or the hover to work when I access a list, unless I first go to quick view and then back to normal view. I can't just go to a list and get the functionality.
2) I would really like for this to work when I am using list grouping, as I have a list with many many attachments in it grouped based upon region. Is there a way to make this work?
Thanks!
Hi Hector,
I'll have a look into it.
This piece of code provides exactly the functionality I needed. Thanks for putting it together and sharing. However, if the filename of the attachment includes special characters like apostrophes (single quotes), ampersands and periods, the resulting hyperlinks are broken. Does the construction of the URL need to pass through a URL encoding?
Solved my own problem. Looks like ampersands and trailing periods (which creates a situation like this filename..pdf) are not supported by SharePoint at all. The apostrophes, though, are supported by SharePoint but the ListAttachment script here was allowing the apostrophe to function as a string termination quote- which broke the hyperlink. In a nutshell, you just need to escape the apostrophe so that it is treated as part of the URL and not the end of the URL.
Line 257 looks like this now: wrapBuffer.push("<a href='" + item.fullPath + "' ");
Fixed if you change it to: wrapBuffer.push("<a href='" + item.fullPath.replace(/\'/g,"'") + "' ");
There might be a more similar (and perhaps more elegant) way to do this with URL/URI encoding, but the code above works. Would love it if Daniel would include one of these in the next version…
Thanks Clark,
I'll include it in the next version!
Hi, I see where David figured out his PDF icon issue, but I can't seem to figure out how to add an icon type definition/file for ICS files (using a calendar icon). Is this still on line 256? Where is /_layouts/images/ic relative to my site? Is this the same as the images folder viewable within SharePoint Designer? If it makes a difference, this is on SharePoint Online.
Thanks!
Hi. I am trying to use this solution in a combination with another. On a webpart page I used the Tabbed web part solution for SP 2013 from Mark Rackley. Link: http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42. The combination works only partially. In a tab with multiple attachment, the attachment window just pops up for a very short time and then vanishes. In other tabs with only a few attachment it works perfectly. Also the attachment pop up doesn't work if the list has a grouped view. Can somebody please help me with that.
Thanks and kind regards
Thanks for this. It works great for me on our SharePoint 2013 site. We use it from the quickedit view.
I wonder if it'd be possible to add an additional attachment somehow. Eg a link in the balloon brings up the add attachment dialog.
Thanks
Hello
My company is using this solution and we are very pleased with it. We showed it to a client but they can't open it. Mixed content option on the Internet Explorer is activated but the preview window for the attachment is not showing.
We tried to open the SharePoint list on Firefox or Chrome but there isn't an option for activating the mixed content permanently or activating it for specific sites.
Did someone had similar experience.
Hi,
I am currently experiencing an issue with this in SharePoint 2013.
Everything works correctly as it should until I scroll down on the page. My list is currently limited to 30 items per page. When I scroll down , the bubble still pops up but it is not in the correct location, and then it quickly disappears. If I scroll back up on the page all works correctly.
Any ideas?
how do you implement this for all list and libraries by editing the master page? i tried and does not seem to work for some reason, my other scripts works fine.