(Updated) Open list item attachments by clicking the paperclip – Version 2

Update 28th of July, 2014: Script updated to version 2.3 (see the changelog)

End of January I adapted the script to open list item attachments with a simple click on the paperclip symbol, which Alexander Bautz from spjsblog.com wrote, to SharePoint 2013.

In the last couple of days I have made some further improvements to this script which I want to share with you.

Due to the fact that SharePoint now stores the item ID within the the TR-tag’s ‘iid‘ attribute, it is not longer required to put the ID column into the view. Therefore, it also not necessary anymore to use the ‘hideIdColumn‘ attribute. Just decide in the view configuration whether you want to see this column or not.

Additionally I changed the presentation of the attachments to a nice speech bubble styled overlay which looks much better than the simple box from the earlier version (imho).

In order to style the speech bubble to your needs, I introduced three new  properties which are ‘colorFont’, ‘colorGradientStart’ and’colorGradientEnd’. It is not necessary to give the bubble a gradient. If you want it to have a uniform color just give ‘colorGradientStart‘ and ‘colorGradienEnd‘ the same value.

1. colorFont: the font color inside the bubble, can be a HEX (e.g. ‘#000000’), RGB (e.g. ‘rgb(0,0,0)’) or Word value (e.g. ‘black’)
2. colorGradientStart: start color of the gradient (top), must be an RGB value (e.g. ‘rgb(231, 14, 30)’)
3. colorGradientEnd: end color of the gradient (bottom), must be an RGB value (e.g. ‘rgb(187, 6, 20)’)

You can read about the other properties here.

The complete code snippet you have to put on the page may now look like that:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script><script type="text/javascript" src="/Path to the Script/ListAttachments_v2.3.js"></script>
<script type="text/javascript">
    var argObj = {clickToOpen:false,
                  clickMouseover:'Click to open',
                  oneClickOpenIfSingle:false,
                  colorGradientStart: 'rgb(231, 14, 30)',
                  colorGradientEnd: 'rgb(187, 6, 20)',
                  colorFont: 'white'
                  };
</script>

In the example above, the bubble containing the links to the attachments will open when you hover your mouse over the paperclip symbol and will close when your mouse leaves the bubble. The color of the bubble is a gradient of two variations of red and the font color is white.

And here is how it looks like in action:

Enjoy the easy way to view and open list item attachments!

Update February 14th, 2014:

I made further improvements and the script will also show attachments in the Quick Edit mode, now:

Update July 28th, 2014:

Script now works with the Newsletter view style, too.
The ID column must be included in the view, otherwise it won’t work.
To hide the ID column use the argument ‘hideIdColumn’ with the value of ‘true’.

Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script><script type="text/javascript" src="/Path to the Script/ListAttachments_v2.3.js"></script>
<script type="text/javascript">
    var argObj = {clickToOpen:false,
                  clickMouseover:'Click to open',
                  oneClickOpenIfSingle:false,
                  colorGradientStart: 'rgb(231, 14, 30)',
                  colorGradientEnd: 'rgb(187, 6, 20)',
                  colorFont: 'white',
                  hideIdColumn: true
                  };
</script>

Click here to download the script