Microsoft 365 & Power Platform Training and Consulting

Contact

Replace SharePoint attachment paperclip icons with actual hyperlinked attachment names in list views

—

1–2 minutes

You can attach documents to SharePoint list items. However if you add the “Attachments” column to your list views, you get a column that only shows a paperclip icon (see below) if there are any attachments. Clicking that paperclip also won’t open any attachment or the list item to view them. It’s strictly an image.

attachment paperclip

Here’s how you can replace that paperclip on each row with the actual name(s) of your attachment(s) linked to the actual attachment(s).

Download this code, or copy and paste it into a new file in your Site Assets folder as ShowAttachments.js:


<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script&gt;
<script type="text/javascript">
(function () {
var attachmentsFiledContext = {};
attachmentsFiledContext.Templates = {};
attachmentsFiledContext.Templates.Fields = {
"Attachments": { "View": AttachmentsFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(attachmentsFiledContext);
})();
function AttachmentsFiledTemplate(ctx) {
var itemId = ctx.CurrentItem.ID;
var listName = ctx.ListTitle;
return getAttachments(listName, itemId);
}
function getAttachments(listName,itemId) {
var url = _spPageContextInfo.webAbsoluteUrl;
var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
var str = "";
$.ajax({
url: requestUri,
type: "GET",
headers: { "ACCEPT": "application/json;odata=verbose" },
async: false,
success: function (data) {
for (var i = 0; i < data.d.results.length; i++) {
str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
if (i != data.d.results.length – 1) {
str += "<br/>";
}
}
},
error: function (err) {
}
});
return str;
}
</script>

view raw

showattachments

hosted with ❤ by GitHub

When on the list view for which you’re wanting to show attachments, edit the page (settings wheel –> edit page).
chrome_2018-07-20_09-22-11

Add a web part.
chrome_2018-07-20_09-23-09

Add a content editor web part.
chrome_2018-07-20_09-23-35

Paste the URL to the script you saved earlier in the Content Link box.
showattachments

Expand “Appearance” and set Chrome Type to “None” and click OK.
chrome_2018-07-20_09-24-48

Save the page/stop editing.
chrome_2018-07-20_09-25-11

That’s all there is to it!
show attachments

Discover more from Nate Chamberlain

Subscribe to get the latest posts sent to your email.

31 responses to “Replace SharePoint attachment paperclip icons with actual hyperlinked attachment names in list views”

  1. James V Avatar
    James V

    I got it to work, but anytime I make a change to the list or view or create a new view, it resets the code and goes back to showing the paperclip.

    Reply
  2. Corey Avatar
    Corey

    Hi!
    I’ve gotten the script to work but as soon as I leave the page it stops working. It seems like I need to force the code to work by “editing the part” and just hitting OK. Then it’ll work in edit mode but the moment I stop editing, it goes back to the paperclip… Is there a setting I need to turn on?
    SharePoint 2013
    Thanks!

    Reply
    1. Nate Chamberlain Avatar
      Nate Chamberlain

      After publishing your page, press Ctrl+F5 to perform a hard refresh. This clears your browser’s cache and ensures you are loading the most recent version of the page. If the issue persists, try moving the web part to the opposite side of the list. For example, if the web part containing the script is above the list, move it below (or vice versa). This small change in placement can sometimes help the script load more effectively.

      Reply
  3. Stacy Mills Avatar
    Stacy Mills

    I was able to get this to work, but when I export the data to Excel the column just shows “Attachments” instead of the actual file name. I have over 500 records so I need to be able to export it somehow. Any thoughts?

    Reply
  4. Susan Davis Avatar
    Susan Davis

    Thank you so much for the code! It works but when I click out of the list then back into the list the links are gone and it’s just paperclip images again. What am I doing wrong? I have 2013.

    Reply
  5. Ximena Alarcon Avatar
    Ximena Alarcon

    is it possible to do this in the new office 365 version of SharePoint?

    Reply
    1. Darora Avatar
      Darora

      I am trying to get it to work on 365 but no luck so far.

      Reply
      1. qwerty Avatar
        qwerty

        Were you able to make it work on 365 ? If so could you please post here

        Reply
        1. Nate Chamberlain Avatar
          Nate Chamberlain

          Unfortunately, SharePoint JSON column formatting doesn’t give direct access to attachment filenames or other attachment details, making it impossible to dynamically reference filenames directly in JSON without additional workarounds. I’ll share two ideas here.

          Workaround 1: Same Attachment Filename for All Items
          You can create a working solution where all attachments have the same filename (e.g., “FILENAME.xlsx”). This is feasible if your list items always have the same file attached for each item, such as an intake form. Here’s the JSON code:

          {
          “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
          “elmType”: “div”,
          “style”: {
          “display”: “block”,
          “text-align”: “center”,
          “padding”: “10px”
          },
          “children”: [
          {
          “elmType”: “a”,
          “style”: {
          “color”: “#4F6BED”,
          “text-decoration”: “none”,
          “font-size”: “14px”
          },
          “attributes”: {
          “target”: “_blank”,
          “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/FILENAME.xlsx’”
          },
          “txtContent”: “FILENAME.xlsx”
          }
          ]
          }

          This approach assumes that each list item has an attachment with the same name (e.g., “FILENAME.xlsx”). The URL is constructed using the item ID ([$ID]) and the fixed attachment filename. While this is limited, it does work if all attachments follow the same naming convention.

          Workaround 2: Use a Custom Column for Attachment Filenames
          If the attachment names vary, you could use a custom column to store the attachment name for each list item. While this requires manual entry or automation via Power Automate, the custom column will then allow you to reference attachment filenames dynamically in JSON. I’d recommend hiding this column from views and forms, especially if using Power Automate to get attachment details to populate it automatically.

          Here’s how the JSON would look if you’re using a custom column (e.g., AttachmentFileName) to store the attachment name:

          {
          “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
          “elmType”: “div”,
          “style”: {
          “display”: “block”,
          “text-align”: “center”,
          “padding”: “10px”
          },
          “children”: [
          {
          “elmType”: “a”,
          “style”: {
          “color”: “#4F6BED”,
          “text-decoration”: “none”,
          “font-size”: “14px”
          },
          “attributes”: {
          “target”: “_blank”,
          “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/’ + [$AttachmentFileName]”
          },
          “txtContent”: “[$AttachmentFileName]”
          }
          ]
          }

          Here, the [$AttachmentFileName] column dynamically provides the correct filename, which is then used to construct the URL and display the link text.

          To reduce the manual effort, Power Automate can be used to automatically populate this custom column with the attachment details. A flow could be triggered when an item is created or modified, fetching the attachment name (Get attachments action) and updating the custom column (update item action) with the file name.

          Both approaches have limitations:
          Same Filename for All Attachments: Works when all attachments have the same name.
          Custom Column for Filenames: Adds flexibility at the cost of manual entry or automation.

          Reply
      2. Nate Chamberlain Avatar
        Nate Chamberlain

        Unfortunately, SharePoint JSON column formatting doesn’t give direct access to attachment filenames or other attachment details, making it impossible to dynamically reference filenames directly in JSON without additional workarounds. I’ll share two ideas here.

        Workaround 1: Same Attachment Filename for All Items
        You can create a working solution where all attachments have the same filename (e.g., “FILENAME.xlsx”). This is feasible if your list items always have the same file attached for each item, such as an intake form. Here’s the JSON code:

        {
        “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
        “elmType”: “div”,
        “style”: {
        “display”: “block”,
        “text-align”: “center”,
        “padding”: “10px”
        },
        “children”: [
        {
        “elmType”: “a”,
        “style”: {
        “color”: “#4F6BED”,
        “text-decoration”: “none”,
        “font-size”: “14px”
        },
        “attributes”: {
        “target”: “_blank”,
        “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/FILENAME.xlsx’”
        },
        “txtContent”: “FILENAME.xlsx”
        }
        ]
        }

        This approach assumes that each list item has an attachment with the same name (e.g., “FILENAME.xlsx”). The URL is constructed using the item ID ([$ID]) and the fixed attachment filename. While this is limited, it does work if all attachments follow the same naming convention.

        Workaround 2: Use a Custom Column for Attachment Filenames
        If the attachment names vary, you could use a custom column to store the attachment name for each list item. While this requires manual entry or automation via Power Automate, the custom column will then allow you to reference attachment filenames dynamically in JSON. I’d recommend hiding this column from views and forms, especially if using Power Automate to get attachment details to populate it automatically.

        Here’s how the JSON would look if you’re using a custom column (e.g., AttachmentFileName) to store the attachment name:

        {
        “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
        “elmType”: “div”,
        “style”: {
        “display”: “block”,
        “text-align”: “center”,
        “padding”: “10px”
        },
        “children”: [
        {
        “elmType”: “a”,
        “style”: {
        “color”: “#4F6BED”,
        “text-decoration”: “none”,
        “font-size”: “14px”
        },
        “attributes”: {
        “target”: “_blank”,
        “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/’ + [$AttachmentFileName]”
        },
        “txtContent”: “[$AttachmentFileName]”
        }
        ]
        }

        Here, the [$AttachmentFileName] column dynamically provides the correct filename, which is then used to construct the URL and display the link text.

        To reduce the manual effort, Power Automate can be used to automatically populate this custom column with the attachment details. A flow could be triggered when an item is created or modified, fetching the attachment name (Get attachments action) and updating the custom column (update item action) with the file name.

        Both approaches have limitations:
        Same Filename for All Attachments: Works when all attachments have the same name.
        Custom Column for Filenames: Adds flexibility at the cost of manual entry or automation.

        Reply
    2. ertyu Avatar
      ertyu

      Were you able to do it in office 365 ? Could you please post here.

      Reply
      1. Nate Chamberlain Avatar
        Nate Chamberlain

        Unfortunately, SharePoint JSON column formatting doesn’t give direct access to attachment filenames or other attachment details, making it impossible to dynamically reference filenames directly in JSON without additional workarounds. I’ll share two ideas here.

        Workaround 1: Same Attachment Filename for All Items
        You can create a working solution where all attachments have the same filename (e.g., “FILENAME.xlsx”). This is feasible if your list items always have the same file attached for each item, such as an intake form. Here’s the JSON code:

        {
        “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
        “elmType”: “div”,
        “style”: {
        “display”: “block”,
        “text-align”: “center”,
        “padding”: “10px”
        },
        “children”: [
        {
        “elmType”: “a”,
        “style”: {
        “color”: “#4F6BED”,
        “text-decoration”: “none”,
        “font-size”: “14px”
        },
        “attributes”: {
        “target”: “_blank”,
        “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/FILENAME.xlsx’”
        },
        “txtContent”: “FILENAME.xlsx”
        }
        ]
        }

        This approach assumes that each list item has an attachment with the same name (e.g., “FILENAME.xlsx”). The URL is constructed using the item ID ([$ID]) and the fixed attachment filename. While this is limited, it does work if all attachments follow the same naming convention.

        Workaround 2: Use a Custom Column for Attachment Filenames
        If the attachment names vary, you could use a custom column to store the attachment name for each list item. While this requires manual entry or automation via Power Automate, the custom column will then allow you to reference attachment filenames dynamically in JSON. I’d recommend hiding this column from views and forms, especially if using Power Automate to get attachment details to populate it automatically.

        Here’s how the JSON would look if you’re using a custom column (e.g., AttachmentFileName) to store the attachment name:

        {
        “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
        “elmType”: “div”,
        “style”: {
        “display”: “block”,
        “text-align”: “center”,
        “padding”: “10px”
        },
        “children”: [
        {
        “elmType”: “a”,
        “style”: {
        “color”: “#4F6BED”,
        “text-decoration”: “none”,
        “font-size”: “14px”
        },
        “attributes”: {
        “target”: “_blank”,
        “href”: “=’https://YOURTENANT.sharepoint.com/sites/YOURSITE/Lists/YOURLIST/Attachments/’ + [$ID] + ‘/’ + [$AttachmentFileName]”
        },
        “txtContent”: “[$AttachmentFileName]”
        }
        ]
        }

        Here, the [$AttachmentFileName] column dynamically provides the correct filename, which is then used to construct the URL and display the link text.

        To reduce the manual effort, Power Automate can be used to automatically populate this custom column with the attachment details. A flow could be triggered when an item is created or modified, fetching the attachment name (Get attachments action) and updating the custom column (update item action) with the file name.

        Both approaches have limitations:
        Same Filename for All Attachments: Works when all attachments have the same name.
        Custom Column for Filenames: Adds flexibility at the cost of manual entry or automation.

        Reply
  6. Brad Avatar
    Brad

    Hi, Thanks for this code. Works great. Now I’d like to export the list metadata and attachement names to excel but the file name doesn’t export. Any ideas on how to make that happen?

    Reply
    1. SLM Avatar
      SLM

      Brad – I’m having the same issue. Were you able to find a solution?

      Reply
  7. Lucas Riedi Avatar
    Lucas Riedi

    does this work in SharePoint 2013? I can’t seem to get it to work, just still shows the paperclip

    Reply
    1. Nate Chamberlain Avatar
      Nate Chamberlain

      Try moving the web part with the script reference above or below the list web part where you have it now. Could make a difference. I’ve gotten this to work in 13 and 16 before.

      Reply
  8. Nate Swetland Avatar
    Nate Swetland

    This is great, but a better solution would be instead of simply showing the URLs in the Attachment column, can you provide a way that if we have an “AttachmentURL” column it would permanantly insert the filenames/fullURL into that column?

    Reply
    1. Ryan Avatar
      Ryan

      Correct me if I’m wrong, I think I did something like you want Nate but I am actually saving the attachment in a separate document library too. I used a regular workflow to set the link to a separate folder and then I used Flow in conjunction to extract the attachment and save it to that link instead of somewhere you can’t get to in SharePoint. In my list, the URL shows in the attachment URL column and is clickable – takes you right to the attachment.

      Reply
      1. Maria Avatar
        Maria

        Hi Ryan, any chance of sharing your method for doing that in Flow?

        Reply
        1. Ryan Avatar
          Ryan

          Yeah, no problem! Since I wrote this, we went strictly to Flow, so…

          My Flow is to start automatically and it is a separate Flow:

          When an item is created or modified
          Get Attachments
          Condition
          I chose an Expression: length(body(‘Get_attachments’)) is greater than 0
          If yes, Update item. I have a field for Attachment Link to shared documents/Title (of the item)
          Apply to each
          Body
          Get attachment content

          Create file

          *Site Address
          Site Name – https://company.sharepoint.com/site
          *Folder Path
          /Shared Documents/Title

          *File Name
          DisplayName
          ⁠
          *File Content
          Attachment Content

          ⁠
          I hope this helps you. If you need more help, let me know!
          Ryan

          Reply
          1. Maria Avatar
            Maria

            That was very helpful. Thanks!

    2. Nate Chamberlain Avatar
      Nate Chamberlain

      You could use Power Automate to achieve this efficiently. When an item is created or modified, you can use the “Get Attachments” action in Power Automate to retrieve the filenames and URLs, then update the “AttachmentURL” column with this information. This way, the list will automatically populate the column with the full URL to the attachment without manual intervention. There is dynamic content available from the Get Attachments action in Power Automate for links to the attachments that makes this process easier and reduces the need for manual updates.

      Reply
  9. Eric Weiner Avatar
    Eric Weiner

    Great code!

    Is there anyway to force the attachment column to be wider?

    Reply
    1. SharePoint Librarian Avatar
      SharePoint Librarian

      Absolutely! See this: https://sharepointlibrarian.com/2017/04/11/adjust-sharepoint-list-column-widths/

      Reply
      1. Eric Weiner Avatar
        Eric Weiner

        Thanks for the quick response.

        I had already tried that code and it did not work on the “Attachments” column. I also tried to reference the column by its position number in the view and that did not work either. Is there something specific that needs to be done for the “Attachments” column?

        Also when I implemented that resizing code it caused the page to throw an error regarding the page not being secure.

        Thanks for the help.

        Reply
  10. Palidhje Avatar
    Palidhje

    The script works great when the Style: is set to Default (classic view, I believe is known as)! However, changing it to style: Basic Tables then it does not show the links … how can we do it so it works on any style view?

    Reply
  11. Janice Vardy Avatar
    Janice Vardy

    Hey.. awesome idea! However I can’t get it to work.. Once added the attachment image disappears, I am not getting the url of the attachment.. any ideas?

    Reply
  12. Paul Dallman Avatar
    Paul Dallman

    Great solution, but as per Ryan…. Is there a way to get this to work in Modern UI?

    Reply
    1. SharePoint Librarian Avatar
      SharePoint Librarian

      Unfortunately, it’s an entirely different structure and I don’t know of a way to produce the same result in Modern UI.

      Reply
      1. Paul Dallman Avatar
        Paul Dallman

        No problem.

        Thanks for the quick response!

        Paul Dallman Applications Manager Union Maritime Limited 7 Portman Mews South, London, W1H 6AY Mobile: +44 7469157994 Email: Paul@unionmaritime.com http://www.unionmaritime.com Union Maritime Limited is a company registered in England and Wales under company number 05674101 and with its registered office at Portland House, 69-71 Wembley Hill Road, Wembley, HA9 8BU, United Kingdom. ​Our privacy policy can be found here. ​

        Reply
  13. Ryan Avatar
    Ryan

    I have gotten this to work with the “classic view”. Can you get it to work with the “New Experience” lists?

    Reply

Leave a Reply

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

Discover more from Nate Chamberlain

Subscribe now to keep reading and get access to the full archive.

Continue reading

Code of Conduct - Terms and Conditions - Privacy Policy