Issue displaying attachments in CSR JavaScript Display Templates

As I was preparing some of my new demos for my forthcoming talk at SharePoint Saturday Belgium at the end of April, I discovered a limitation in displaying attachments in CSR JavaScript Display Templates for list views that I thought I should probably raise here as there seems to be little information on the net currently.

As I’ll be presenting in a country well renowned for it’s beer, I decided to create a beer themed demo. To this end I created a list of beers, with metadata such as Brewery and region assigned to each.

I also included a scanned image of each label as an attachment to the list item, the intention being to attach multiple items if the beer had multiple labels.

And here I discovered a limitation. List View JavaScript Display Templates can only work with the context object provided by SharePoint, and the attachments collection just does not appear in the list view. All you get is the fact that attachments exist.

If we take a look at the JSON object representing the first item in our list, we can see that the Attachments field consists of a number only, and not a URL to the attachment.


Indeed, if we look at the default rendering template that gets assigned by SharePoint, it merely displays an icon if the number after attachments is greater than 0.


No processing of the URL’s occurs, unlike the display view of a list item which shows the attachments in full.

Now I can understand why Microsoft have designed the templates this way, processing the attachments list for each item could have the potential to be quite intensive server side, so for my demo, I’m going to have to switch to use a publishing image link field instead, which will restrict me to one label per entry.

It’s not ideal, but the alternative would be to process the attachments collection with each list item using CSOM/REST which could become unwieldy in the page.

It’s not the answer I wanted, but for now it will have to do.


Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.