November 17, 2014July 27, 2022 by Simon Doy

SharePoint 2013/Online Attachment Viewer Enhancement

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

91 Comments

How to implement Validation to require Attachments in a SharePoint List Item creation in SharePoint 2013 using Client-side Rendering | JoSharePoint January 30, 2015 at 18:03

[…] – http://blog.ithinksharepoint.com/2014/11/17/sharepoint-2013online-attachment-viewer-enhancement/ […]

Reply
Phil March 2, 2015 at 00:34

I tried this and it fails to work. I followed your steps to the letter and…nothing. It appears you have this set up with the default style for the list…is this correct?

Reply
1. Simon Doy March 2, 2015 at 08:34
  
  Hi Phil,
  Yes that’s correct, the view needs to have the Attachments column selected.
  
  I would suggest checking the URL that you have setup for the JS Link web part property.
  If you are using the URL that I provided, ~site/siteassets/scripts/itsp.sp.attachmentfield.js. Did you create a folder within the Site Assets library called Scripts and upload the ITSP.AttachmentField.js file into there?
  
  I take on board your comments and will mention having a view with the attachment column showing.
  
  Let me know how you get on.
  
  Reply
  1. Phil. March 3, 2015 at 04:09
    
    Ok, I was in the default view with icon showing from the start but I do not have access to the site/siteassets location being a portal admin only. I created an assets library on my portal and linked to the file in that. I used the ~along with the url (site to the end) but nothing happened. Sucks because I really need this to work. I had this functionality with SP2007 but we just upgraded to SP2013. I lost a lot when this happened.
    
    You said I need the attachments column selected? Do I need to change that in the code or is it automatic upon jslink add? I assumed from your steps it was automatic. Does column placement in the list matter?
  2. Simon Doy March 3, 2015 at 06:34
    
    Hi Phil,
    It will just work when the JSLink property is set, that is provided the URL that you input is the location of where the iTSP.AttachmentField.js found.
    Just a note as an admin you should see the Site Assets library using the Site Contents link from your site.
    
    If can send me an email simon at ithinksharepoint dot com lets get you up and running.
  3. Phil. March 4, 2015 at 03:01
    
    As a portal site admin, my Site collection admin limits my view to only my department. I can’t see the site assets.
  4. Simon Doy March 3, 2015 at 11:22
    
    Hi Phil,
    You mentioned that this SharePoint environment has been upgraded.
    
    Has your site been upgraded into SharePoint 2013 format? Does your site look like the images that I have put on the blog post?
    
    This could be the issue, can you try the script on a newly created document library within your site.
  5. Phil. March 4, 2015 at 02:59
    
    I’ll give it a try… I hope this isn’t the issue because the library I need it for is too big to rebuild. Maybe it’s just the view aspx pages (I hope, I hope).
  6. Simon Doy March 4, 2015 at 06:22
    
    If it is a problem then I would suggest speaking with your admins as it should be able to be upgraded.
    Let us know how you get on.
    
    Can you do things like drag and drop into the library from your desktop?
  7. Phil. March 5, 2015 at 02:40
    
    Well, I tried a new list, no customixation except your attachments code and it still does nothing. I get error codes as well…
    
    EditForm.aspx
    HTML1512: Unmatched end tag.
    AllItems.aspx, line 82 character 98
    HTML1514: Extra “” tag found. Only one “” tag should exist per document.
    AllItems.aspx, line 83 character 1
    HTML1410: Invalid unquoted attribute value. Unquoted attribute values should not contain (“), (‘), (<), (=), or (`).
    AllItems.aspx, line 326 character 73
    HTML1410: Invalid unquoted attribute value. Unquoted attribute values should not contain ("), ('), (<), (=), or (`).
    AllItems.aspx, line 326 character 75
    SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
    AllItems.aspx
    
    Not sure what the issue is.
  8. Phil. March 5, 2015 at 02:42
    
    Oh…I can drag and drop files from my desktop.
  9. Simon Doy March 5, 2015 at 21:36
    
    Well that’s good news, so that proves that you are running in 2013 mode.
    
    I have checked to make sure that there isn’t anything wrong with the .js file that has been attached to this post. I was able to successfully download and apply the code to a Sharepoint list.
    
    Do you have a support team that can assist you? As it sounds like there is a problem with the page markup.
    
    I am going to do a little video which shows the process of applying the JS file but I won’t get it down today as I am travelling.
  10. Phil. March 6, 2015 at 07:43
    
    Thanks for your help so far. I think there is a masterpage problem as I seeing errors (I get a scroll error).
  11. Simon Doy March 6, 2015 at 11:12
    
    No problem, I have added a video which shows the process of setting it up. This is my first attempt at a screen capture / voice over video so its not great but maybe it will help.
  12. Phil. March 7, 2015 at 03:40
    
    I watched the video and followed the steps to load the jslink. However, when I looked at the script assets in the debugger window your script didn’t load. It might be because we have a script for a top nav in our masterpage that calls a function to “unload all callouts”.
2. pcnav January 31, 2017 at 05:31
  
  I forgot to note that I found the issue as to why I couldn’t get this to load. I have sites and subsites. When I added the script to the siteassets of the subsite I needed this for it worked. I originally had it on the upper site level.
  
  Reply
Wladek March 28, 2015 at 09:22

Hi Simon,
I have changed the onclick event to onmouseover and the openOption to hover. It doesn’t work properly in some cases. I’m getting errors “The property or field ->’the first field that will be loaded'<- has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested."

The error comes in line this.currentListItem.get_item('SomeField') in the webLoadSuccesss method, but only if quickly hover over many items.

Any ideas?

Reply
1. Simon Doy March 31, 2015 at 06:17
  
  The error sounds like the client context has not been told to load the field that you are looking to retrieve information from.
  
  Reply
  1. Wladek April 2, 2015 at 07:29
    
    Thanks.
Robert May 21, 2015 at 18:42

I put your override on one of my views and it works perfectly. I would like to add some custom actions to the callout. However, every method I have found to do this using the CalloutManager ends up adding the actions to the callout multiple times. So on first view, I have Action1, Action 2. Every time the event calls the callout, both actions are added again. Thus, I get this: Action 1, Action 2, Action 1, Action 2 etc…

Any ideas on how to add custom actions to your custom callout without the duplication?

Reply
1. Robert May 21, 2015 at 18:44
  
  Just to clarify, I’m using “new CalloutAction()” and “.addAction()” methods to add custom callout actions.
  
  Reply
  1. Simon Doy May 21, 2015 at 20:38
    
    Hi Robert,
    I think the issue is likely to be down to The a minimal Download strategy. I have modified my script recently to hand this. I have been planning to post the update so you could try that instead.
    To be sure could you post some sample code and I’ll take a look.
    
    Cheers
    Simon
2. Robert May 21, 2015 at 20:46
  
  Here is the code I’m using
  
  SP.SOD.executeFunc(“clienttemplates.js”, “SPClientTemplates”, function () {
  function init() {
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  Templates: {
  Item: function (ctx) {
  var varSiteLoctitle = ctx.CurrentItem.Title;
  var varSiteLocStatus = ctx.CurrentItem.Site_x0020_Status_x003a_Title;
  var varSiteLocID = ctx.CurrentItem.ID;
  var varCurrPageURL = document.URL;
  var varSiteDispFormURL = ctx.displayFormUrl + ‘&ID=’ + ctx.CurrentItem.ID + ‘&Source=’ + varCurrPageURL;
  var varSiteEditFormURL = ctx.editFormUrl + ‘&ID=’ + ctx.CurrentItem.ID + ‘&Source=’ + varCurrPageURL;
  return “”
  + varSiteLoctitle +
  “”
  + varSiteLocStatus +
  “”;
  }
  },
  });
  
  }
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens(“~site/SiteAssets/js/kdeReqSiteLocItemCSR.js”), init);
  init();
  });
  
  function ShowCallout(sender, itemId, title, optToPur, siteReqID, dispFormURL, editFormURL, directory, filename, calloutAction1, calloutAction2) {
  CalloutManager.closeAll();
  var calloutContent = “Title: ”
  + title +
  “Option To Purchase: ”
  + optToPur +
  “Site Request ID: ”
  + siteReqID +
  “”;
  
  var calloutRef = CalloutManager.createNewIfNecessary({
  ID: ‘call_’ + itemId,
  launchPoint: sender,
  beakOrientation: ‘leftRight’,
  title: title,
  content: calloutContent,
  contentWidth: 400,
  });
  
  var calloutAction1 = new CalloutAction({
  text: “View “,
  isEnabledCallback: function () {
  callBackListUrl = dispFormURL;
  return true;
  },
  onClickCallback: function () {
  window.location(callBackListUrl);
  calloutRef.close();
  }
  });
  
  calloutRef.addAction(calloutAction1);
  
  var calloutAction2 = new CalloutAction({
  text: “Edit “,
  isEnabledCallback: function () {
  callBackListUrl = editFormURL;
  return true;
  },
  onClickCallback: function () {
  window.location(callBackListUrl);
  calloutRef.close();
  }
  });
  
  calloutRef.addAction(calloutAction2);
  
  calloutRef.open();
  }
  
  Reply
  1. Simon Doy May 21, 2015 at 23:11
    
    Hi Robert,
    I think the issue is down to the fact that the Callout is not being recreated because we are using CalloutManager.createNewIfNeccessary(). This feels right, now because of that I would think the actions are just getting added on top of one another. So I think you should check to see if the calloutAction has already been added.
    You can do that with a bit of code like this, its a bit hacky but should work. If I had a bit more time I would look at checking the text of the action first.
    
    var calloutRef = CalloutManager.createNewIfNecessary({
    ID: ‘call_’ + itemId,
    launchPoint: sender,
    beakOrientation: ‘leftRight’,
    title: title,
    content: calloutContent,
    contentWidth: 400,
    });
    
    var calloutActionMenu = calloutRef.getActionMenu();
    var currentActions = calloutActionMenu.getActions();
    if(currentActions.length<1)
    {
    var calloutAction1 = new CalloutAction({
    text: “View “,
    isEnabledCallback: function () {
    callBackListUrl = dispFormURL;
    return true;
    },
    onClickCallback: function () {
    window.location(callBackListUrl);
    calloutRef.close();
    }
    });
    
    calloutRef.addAction(calloutAction1);
    }
    
    var calloutActionMenu = calloutRef.getActionMenu();
    var currentActions = calloutActionMenu.getActions();
    if(currentActions.length<=1)
    {
    var calloutAction2 = new CalloutAction({
    text: “Edit “,
    isEnabledCallback: function () {
    callBackListUrl = editFormURL;
    return true;
    },
    onClickCallback: function () {
    window.location(callBackListUrl);
    calloutRef.close();
    }
    });
    
    calloutRef.addAction(calloutAction2);
    }
    
    calloutRef.open();
    
    Hope that helps.
  2. Robert May 26, 2015 at 13:15
    
    I’ll try this approach. Thanks!
  3. Simon Doy May 26, 2015 at 18:50
    
    Good luck, let me know how you get on.
Dar November 4, 2015 at 22:48

Works fine on the list itself, but when applied to the list view web part on another page, after clicking on paperclip icon, I get an “asynccallfailed. Item does not exist. It may have been deleted by another user or…(etc., etc.)”

What is causing this, and how can it be remedied?

Reply
1. Simon Doy November 5, 2015 at 06:23
  
  Hi Dar,
  Thanks for letting me know.
  
  Can you post the error message? Do you have just one listview web part or multiple listview web parts?
  
  As for how to resolve, if you could provide the error details I’ll take a look. Just to let you know it will be next week when I can spend some time on this.
  
  Cheers
  Simon
  
  Reply
Dar November 5, 2015 at 16:30

Thanks, Simon, impressed with your response, many developers just have a “post it and forget it” attitude towards their solutions. No problem that you can’t look into it in more detail until next week, I’m just happy that you can at all.

Ok, I have a list view web part in a page that contains other list view web parts (from different lists). I added the reference to the .js file in the Misc section for one of the list views, and I do see the “Click to view attachments” text bubble when hovering over the paperclip icon in the Attachments column. But when I click on the icon, a warning dialog box titled “Message from webpage” pops up with the following message: asynccallfailed Column ‘Attachments’ does not exist. It may have been deleted by another user. undefined”. This is almost exactly the same error I got the other day, the difference being “Item” vs “Column ‘Attachments'” in the message. The only change I had made was removing the .js reference from the list page itself, and kept it only in the list view webpart that was on another page.

Reply
1. Simon Doy November 15, 2015 at 08:25
  
  Hi Dar,
  Thanks for the additional info, I’ll be taking a look tomorrow and see what we can do to fix.
  
  Cheers
  Simon
  
  Reply
2. Simon Doy November 17, 2015 at 19:31
  
  Hi Dar,
  Please take a look at the latest version of the blog post. I have been able to recreate and resolve the issue. The error was down to the script creating duplicate html elements with the same id.
  If you download the new version and upload over the top of the existing JavaScript file. Please note you will probably need to force your browser to refresh its file cache to avoid loading the previous version.
  
  Cheers
  Simon
  
  Reply
agnes November 27, 2015 at 07:00

can this script modify to become hover to show the attachment ?

Reply
1. Simon Doy November 27, 2015 at 09:01
  
  It could be sure!
  
  However, one of the nice things about it being accessed via clicking the paperclip is that it’s not intrusive and the user is asking for the attachments to be shown.
  
  Also it sets user expectation, when they click on the paper clip they have an appreciation that they are going to have to wait for something to happen.
  
  If we automatically show them, I will expect that users to find that annoying. Because as they hover over the paperclip, then this thing pops up. Also it may take longer than they would like for it to show up which could lead to further frustration.
  
  Anyway, the code is there for you to try it out, I would start by moving the function from the onclick() event to onMouseOver() event.
  
  This article discusses the different events.
  http://mobile.htmlgoodies.com/beyond/javascript/article.php/3470771
  
  Cheers
  Simon
  
  Reply
HopingForAnswer December 23, 2015 at 18:24

Hi Simon,

1. I added the script exactly as you describe, and works great – once the screen is forced to Refresh (F5). I’m using SP2013 Foundation and it seems that the “MDS refresh” issue still exists? Once I turn off MDS on the site everything works perfectly. Hoping there’s a solution for that?

2. I have an Events list that run off a calendar, and when i have an attachment linked to the calendar event the paperclip is visible and your popup works, but shows (0) as the number of attachments (and no filename to click on). Has anyone tried to use this as part of a calendar list before?

Thanks very much,
Ken

Reply
1. Simon Doy December 24, 2015 at 08:56
  
  Hi Ken
  Well that’s embarrassing if there is an issue with MDS still. I did update the solution recently and maybe inadvertently removed the MDS bit.
  
  I haven’t tried it with the calendar list template but am surprised it’s affected, let me take a look.
  
  Cheers
  Simon
  
  Reply
2. Simon Doy December 26, 2015 at 17:36
  
  Hi Ken,
  Merry Xmas! I have just been checking and can confirm that the script is MDS compliant. The issue that you maybe having is if the script is not in the SiteAssets/Script folder. There is a function called RegisterModuleInit which is coded to use the path of /SiteAssets/Scripts/ITSP.SP.AttachmentField.js.
  
  If i dont have the JavaScript at that location, then this causes the script to not be loaded when going through the MDS start.aspx process.
  
  Please let me know if this does or does not resolve it?
  
  Cheers
  Simon
  
  Reply
  1. HopingForAnswer December 29, 2015 at 21:23
    
    Hi Simon. Really appreciate your help. Just turned on MDS again and cofirmed having the issue. My scripts folder, and file name is at the following (slight mod for company privacy): http://home.testsite.com/secure/project/SiteAssets/Scripts/ITSP.SP.AttachmentField.js
    I saw the area in the the script you referred to. I’m assuming the script can ‘dig this deep’ to find it?
    I’m at a loss, any help is great. (Also if you can look back in my second posting there is reference to the events calendar trying to find the attachments in the Issue list web part on the same page. The two items shouldn’t be related b/c the MDS issue also appears directly on List page (rather than a Page with multiple web parts).
    Thanks again,
    Ken
  2. Simon Doy January 4, 2016 at 20:48
    
    Hi Ken,
    I have had another look and can confirm there was a problem with multiple web parts on the same page still.
    I have done some more testing and have fixed the issue. I also found a link pointing to an old version of the download.
    
    Please use the download link at the bottom of the updated blog post, which is dated 4th January 2016.
    
    Btw, I found that if I was using SharePoint Online, it took two uploads before the script was updated within browser.
    
    Please let me know how you get on.
    
    Cheers
    Simon
HopingForAnswer January 20, 2016 at 18:06

Hi Simon,
The multiple web parts now works – took a while (maybe a server refresh or something).
But, the MDS still does not work on my platform – it requires an F5 refresh to enable (unless I turn MDS off and it works perfectly every time).
As mentioned, I set up the Scripts folder in the exact spot you stated, and we use SP2013 Foundation. Any help is great – worst case I could turn MDS off I gues…

Thanks,
Ken

Reply
1. Simon Doy January 22, 2016 at 23:57
  
  Hi Ken,
  Right there was definately an issue with MDS. I thought I had cracked it but seen another problem. Now the version which is dated the 22nd January 2016 is definitely working fine with MDS. I have been testing it for a while. I have completely refactored the solution so it should be a bit cleaner too.
  
  Let me know how you get on.
  
  Cheers
  Simon
  
  Reply
SharePointer January 20, 2016 at 19:21

Would it be possible to have the .js file call to display documents from a library in which a lookup column refers to the current item ID?

Reply
1. Simon Doy January 22, 2016 at 23:56
  
  Hi,
  I do not see why not though you would need to record somewhere where the document library was in the SharePoint List so that you could go and get the information. To get it working you could just hardcode the name of the list.
  So you could do some CAML query to find the list, though be careful as if there are 1000s of items then I would think about using search.
  
  Let me know how you get on.
  
  Cheers
  Simon
  
  Reply
Andrei F January 23, 2016 at 03:06

Hello,
I managed to get it working but not 100% happy.
Am I doing something wrong?
Issue I have is that initially I have set-up my List View style as “Boxed” (tried newsletter as well).
When I Update the JS Link, and click Apply the List View changes to “default” (the one that looks like an excel file).
I do see the attachments as intended, but should it be changing the List View / Style? Or am I doing something wrong?
Good job with the Script, waiting with interest for any feedback on this issue.
Cheers

Reply
1. Simon Doy January 23, 2016 at 07:00
  
  Hi Andrei,
  
  I haven’t tried it out with different styles for the list view so not sure what the result would be. I wonder if SharePoint will switch to the default view when an override view template is applied for a field.
  
  If I get a chance I will have a look next week.
  
  Cheers
  Simon
  
  Reply
2. Simon Doy January 23, 2016 at 07:17
  
  Hi Andrei,
  So had a quick look and can see that the boxed view gets overridden by the attachment override when the render templates are merged. The solution that I can think of is that you would need to override the overall list view to give it the look and feel that you are after.
  Take a look at https://msdn.microsoft.com/en-us/library/office/jj220045.aspx
  
  Cheers
  Simon
  
  Reply
HopingForAnswer January 26, 2016 at 22:08

Hi Simon,
I think we are verrrry close! MDS is working on most screens now. I have a number of screens with the same setup where the script is not though. They are pages (as opposed to Lists), layout is header at top with two columns beneath. Left column has a task list, Right column is an issue list. Issue list is where I’m using it, but it doesn’t work.

Thanks again,
Ken

Reply
1. Simon Doy January 26, 2016 at 22:16
  
  Hi Ken,
  Thats good.
  I have a setup which is similar, actually more complex with three lists on one page but not seeing problems. is there anything strange about the lists, I am presuming the attachment field is part of the view on the issue list web part that has been added to the page.
  
  are you seeing any errors on the page?
  
  Cheers
  Simon
  
  Reply
Wendy February 27, 2016 at 03:21

Hi Ken
Love this! Thank you. Why would another user with same site permissions as me not see the hover message or be able to click the paperclip? I am using IE11 and she is using IE9…..?

Reply
Wendy February 27, 2016 at 03:41

Hi again Simon
So sorry I called you “Ken”!
Wendy

Reply
1. Simon Doy February 27, 2016 at 08:13
  
  Hi Wendy,
  No problem there have been a few messages from Ken!
  
  I would suggest that you check that everything is checked in and published. If you are using publishing make sure that all the pages where the functionality is being used and also the JavaScript files are also approved.
  
  Cheers
  Simon
  
  Reply
HopingForAnswer March 7, 2016 at 17:49

Hi Simon,
I haven’t had time to get back to this until now. Not good news – I’m only having intermittent success, and now I’m not sure how many variations I tried in the past (not sure if these issues are new or always there – at least on my system).

SharePoint 2013 Foundation
My computer – Windows 10 now, but same results with Win 7 O/S (on same PC)
IE11 32-bit
Firefox v44.0.2
Chrome v48.0.2…

– Home page with multiple web parts, all ok, all browsers
– Other site pages with multiple web parts, not ok until press F5, all browsers
– One List page all ok, all browsers
– Another List page not ok until press F5, all browsers

Can work with you through email if further details needed.
Thanks,
Ken

Reply
1. Simon Doy March 20, 2016 at 06:24
  
  Hi Ken,
  It sounds like there is something incorrect with the way that the scripts are being referenced when running on another site so you are hitting issues with MDS not being able to load the JavaScript.
  
  I have spent quite a bit of time fixing various issues for you but do you not have any development resource within your organisation that can help you further?
  
  Regards
  Simon
  
  Reply
HopingForAnswer March 30, 2016 at 18:10

Hi Simon,
Sorry for all the issues – I am trying to find an internal resource to help as well. Everything works perfectly when I deactivate MDS, so that is what I’m doing for now.

I have run across something though – UX related. I modified by list web parts to use the Shaded view style, but it does not shade. When I remove the JS link the shaded lines appear. (Same issue with Newsletter-no lines too).

Any thoughts?
Thanks once again,
Ken

Reply
1. Simon Doy March 30, 2016 at 18:43
  
  Hi Ken
  I’ll have a look into the MDS again. Maybe we could do a screen session? As for the UI side. I haven’t tested with other styles. Someone else mentioned this as well.
  I’ll have a quick look and see if there is a quick fix.
  Cheers
  Simon
  
  Reply
2. Simon Doy April 8, 2016 at 07:43
  
  Hi Ken
  As you are looking to use the feature all over the place. So think the best approach to this is to provide you with a farm solution which packages the script and deploys into the SharePoint root. The script can then always refer to the same file within MDS.
  How does that sound?
  Cheers
  Simon
  
  Reply
HopingForAnswer April 11, 2016 at 03:04

Hi Simon,
Sorry I haven’t responded – been really busy lately.
That sounds pretty cool! Would save me a lot of time not having to “JS Link” everywhere 🙂
I have a number of Shaded and Newsletter-No Lines lists that would currently revert back to the Default view though. Any chance you looked into whether it is possible to get it working in those views?
Another reason why I like your solution is because this add-on “looks” like it is stock – unlike a couple others out there that look more like speech balloons. Good job!
Contact me privately if need be. And yes – if collaboration via screen sharing is needed to help out I’ll find the time somewhere.

Thanks again,
Ken

Reply
1. Simon Doy April 11, 2016 at 06:16
  
  Hi Ken
  So someone else asked about support for different views. It looks like when you have JSLink those different views are not available.
  
  So having the solution deployed via farm solution wouldn’t solve the JSLink bit but should solve the issue where when adding the script to different sites breaks with MDS.
  
  Cheers
  Simon
  
  Reply
Marcus Aherne August 3, 2016 at 00:03

Simon is there any chance of modifying the code so that it can be use in script editor web part.

Thanks
Marcus

Reply
1. Simon Doy August 3, 2016 at 06:13
  
  Hi Marcus,
  Thanks for the message. I can’t see how that would work as JavaScript needs to hook into the list view to override how the attachment field is rendered.
  
  Drop me an email info at ithinksharepoint dot com and we can have a chat about what you are looking to achieve.
  
  Cheers
  Simon
  
  Reply
G khan August 18, 2016 at 12:48

wow it works like a charm , i was hopeing if i can make he popup background and font colors to change

Reply
1. Simon Doy September 12, 2016 at 18:48
  
  I guess you could be applying some CSS to the generated classes.
  
  Reply
Robin September 12, 2016 at 18:23

My list have an apostrophe in the title and because of this the script wouldn’t work correctly be sure not to have any wild cards in your title at least the apostrophe.

Reply
1. Simon Doy September 12, 2016 at 18:47
  
  Thanks for the feedback Robin
  
  Reply
AK R September 28, 2016 at 21:17

I just downloaded the zip, loaded to my site assets, added the link to the list view WP JS Link….and nothing. I feel like I am missing something, I tried to access the video above and it does not seem to want to work for me.

SP Online
IE 11

No errors, no anything.

Reply
1. Simon Doy September 29, 2016 at 07:57
  
  Hi Amber,
  Not sure what the issue was with the video, the video was working when I just tried now.
  
  Can you try again to view the video. Do you have the attachment field added to the list view?
  
  If the video is not working then I wonder if it is being blocked by a corporate firewall?
  
  Kind Regards
  Simon
  
  Reply
  1. Simon Doy September 29, 2016 at 07:59
    
    Just a thought is your SharePoint Online library using the new modern feel?
    I haven’t tried the script on this yet.
AK R September 29, 2016 at 21:29

The video is working today!~ TaDa!~

Unfortunately, I did everything in it and….nothing…
I have the new view so we are using classic.

I did the F12 debugger and it is not showing the JS script in the list of files?

Reply
1. Simon Doy September 29, 2016 at 22:17
  
  I guess that might.be a problem. 🙂 I suggest you check the JS Link URL you have entered
  .
  
  Reply
  1. Simon Doy September 29, 2016 at 23:09
    
    So I have just looked at the JS files loaded in the browser and I am also seeing that the JavaScript file does not seem to show via the F12 dev tools in the Sources tab in Chrome.
    
    However, if I look in the Network tab I can see the entry for the JavaScript file being downloaded. I can also see an entry for the script in the HTML source.
    
    I have tested the script again by creating a new list in SharePoint Online. I added the attachment field to the view and added an attachment. Everything is working as I’d expect. Please update your JS Link url again, maybe try the absolute url to for the JS script file?
    In my site located at /sites/dev my script uses this url ~site/siteassets/scripts/itsp.sp.attachmentfield.js
    
    Cheers
    Simon
Brian December 5, 2016 at 20:07

I realize this is old but i just came across it. I have a list that i would like to add attachments to. I followed your example and when i hover over the paperclip nothing happens. I beleive i followed your steps excatly. Can you provide any troubleshooting tips?

Im using Sharepoint Online

Reply
1. Simon Doy December 7, 2016 at 15:27
  
  Hi Brian,
  The first thing to do would be to use your web browser to see if the JavaScript file has been loaded or if there was a problem loading the file. For example if the JS link address was not quite right and therefore SharePoint could not find the JavaScript file.
  To do this with Google Chrome or Internet Explorer and press F12.
  
  Click on the Network tab in Google Chrome and refresh the screen and look for the file, itsp.sp.attachmentfield.js, check that the Status is 200 (Ok) or 304 (Cached).
  
  Click on the Network tab in IE and refresh the screen and look for the file itsp.sp.attachmentfield.js, check that the Result is 200 which means OK.
  
  Do you see the file loaded?
  
  Additionally, did you save the page and come out of editing mode as the JSLink will not be applied properly until the page has been saved and loaded.
  
  Kind Regards
  Simon
  
  Reply
Stewart December 13, 2016 at 06:37

Hi Simon. I have used your javascript library for accessing sharepoint list item attachments and it works great….awesome work! I have a similar requirement for accessing Related Items within a document library. Can your javascript library be modified to provide a pop up of related items similar to the way it works for attachments? Thanks Simon…

Reply
1. Simon Doy December 13, 2016 at 06:57
  
  Hi Stewart,
  I guess it could be with a bit more development. drop me an email info at ithinksharepoint dot com and we can chat offline about what you are looking for.
  Simon
  
  Reply
Igors Moskalcovs January 4, 2017 at 13:32

Hello, and thank you for a wonderful solution. It works great.
Except 🙂 when i try to use different style, it errors out when applying JSLink.
For example, i created a view, changed view style to “Newsletter, no lines”, added JSlink. Result – IE crashes, every time i use this view.
It works excellent for Default style though.

Reply
1. Simon Doy January 4, 2017 at 14:01
  
  Hi Igors thanks for the feedback yes I heard it doesn’t work for other views unfortunately I don’t have time to resolve it at the moment. I might take a look when Share Point Framework is available for general release.
  
  Reply
journeymblog January 12, 2017 at 11:55

I wanted to get doc.icons in this popup, but i cant get file extension, how can a reference an extension for attachmentFile? Thank you.

Reply
1. journeymblog January 12, 2017 at 12:24
  
  Ok, SP.Attachment doesnt have such property. I used “var ext = attachmentFilePath.substr(attachmentFilePath.lastIndexOf(‘.’) + 1);” works perfectly )
  
  Reply
  1. Simon Doy January 12, 2017 at 19:48
    
    Thanks for letting us your solution.
    Cheers
    Simon
  2. journeymblog January 13, 2017 at 07:27
    
    Finally, to get doc icons into popup windows, change line 101 to
    
    attachmentContentHtml = attachmentContentHtml + "<li><a href='" + attachmentFilePath + "?Web=1' target='_new'><img id='attacment_" + i + "_icon' class='ms-asset-icon ms-rtePosition-4' style='height: 16px; width: 16px' src='/_layouts/images/ic" + ext + ".png'>"+ attachmentFile.get_fileName() +"</a></li>";
    
    .
    Also, please delete ?Web=1 prefix, if you don’t use Office Web Apps.
Debarghya January 23, 2017 at 07:52

The solution worked pretty well. I would additionally like to know, unlike In SharePoint 2010, in SharePoint2013 we do not have the option to Add/Remove Attachment through the paperclip on the datasheet. Is this something that can also be added to the solution.

Reply
1. Simon Doy January 27, 2017 at 07:21
  
  I am happy to have a chat about your requirements, please drop me an email via info at ithinksharepoint dot com.
  
  Reply
Dhanshri May 18, 2017 at 07:02

That,s working good. But I am not understanding the code. Please anyone can give short explanation?

Reply
Mayuri May 19, 2017 at 05:45

Hi Simon,
Its working only with Internet explorer. Other browsers are not supported

Reply
1. Simon Doy May 19, 2017 at 13:20
  
  Hi it always used to work on Chrome. To be honest with Sharepoint Framework coming out and other priorities Iam not going to spend much time on this.
  What error are you getting?
  
  Reply
Abiyu June 20, 2017 at 15:26

Hi Simon,
Thanks for the post and timely responses. It works perfect for me and I need one more capabilities regarding attachment.
Is there any solution to replace the paperclip picture with a name? if so, please let me know.

Regards
Abiyu

Reply
1. Simon Doy June 20, 2017 at 15:40
  
  Hi Abiyu,
  So you would like to see the names of the attachment?
  Cheers
  Simon
  
  Reply
randy Walker March 27, 2018 at 02:06

You Beauty !!!!! Thank you so much Simon. This works well.

Reply
James Cox September 18, 2018 at 15:32

Attempting to use this in IE. in the F12 Developers Tools, the .js file is being found in Site Assets / Scripts per the Network tab, but in the debugger window it’s throwing an error
‘jQuery’ is undefined
Immediately after
Query(function () {
if(typeof asyncDeltaManager != “undefined”){
asyncDeltaManager.add_endRequest(listAttachments)
} else {
listAttachments();
}
});
Obviously, I’m missing something, but I’m not sure what…

Reply
1. Simon Doy September 25, 2018 at 21:45
  
  Hi James,
  So the jQuery is undefined error is happening because the code requires the jQuery library to be loaded before it can execute. I don’t recognise that bit of code. Is this happening when you add the .js file to a normal SharePoint page? Is the site template you are using customised in any way or out of the box?
  
  Let me know and I’ll try and do my best to help you resolve this issue.
  
  Cheers
  Simon
  
  Reply
Rafael Costa October 17, 2018 at 15:58

Hi Simon,

Congrats for your post. This really helped me! But I need run this JS with “Boxed View” and when I appled your code, the function for links in attachment work perfectly but my view is automatically change for de “Basic View”. Any ideia about this?

Reply
1. Simon Doy October 31, 2018 at 08:33
  
  Hi Rafael
  I did look at this years back and I don’t believe it’s supported. If memory serves me if there is jslink then SharePoint switches to basic view.
  Sorry!
  
  Simon
  
  Reply