List View: Expand Attachments

Question

List View: Expand Attachments

Grebe, Patrick 21

Hello,

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.

I would like to replacet hat paperclip on each row with the actual name(s) of your attachment(s) linked to the actual attachment(s).
In SharePoint 2013 I used a script for this. Are there any alternatives for SharePoint-Online?

Users have got used to it, and it saves clicks.

Thanks in advance! :)

Accepted answer

2 additional answers

Your answer

Answer 1

Hi @Grebe, Patrick ,

As per my knowledge, there is no OOB way to replace the paperclip icons with the names of the attachments in the attachment field. This is by design for distinguishing the function of list and library in SharePoint. It is not recommended to store or manage documents in a list. Anyway, if you still want to achieve your needs, the following way may be an alternative.

Create a Single line of text in your list. In this example, I created a column named "interLink"
fill the above created field with the name of the attachment.
Format the column with JSON code. {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"href": "=@currentWeb + '/Lists/<yourlistname>/Attachments/' + [$ID] + '/' + @currentField + '?web=1'"
}
}

Test result in my list. The attachment will be opend once you click the attachment name in the new created column.

Also, If you only want to modify the Attachements column, you have to inject cutomized CSS/JS code to SharePoint modern page using SPFx Extensions.

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Allen Xu_MSFT 13,861 Reputation points

2021-08-23T05:48:12.82+00:00

@Grebe, Patrick ,

Is there any update on this thread? I'm looking forward to your reply.
K G Amar 1 Reputation point

2022-09-07T06:23:27.54+00:00

Hi AllenXu,

Thanks for the solution. It worked for us. We were wondering how to implement it if we have multiple attachments. If you could help us with some OOTB answer it would very helpful.

Thank You...!!!

Answer 2

Reuben Mandlenkosi Ndlovu 1

Hi Patrick, How did you manage to display the attachments in SharePoint Onprem list without showing the paperclip?

Koala_Kev 0

You can show the attachment names using JavaScript in the JSLink area of the web part.

You will need to access the "jquery-3.6.0.slim.min.js" [either download it and store it on your site, or reference it from the web] and create a new .js file with this code:

(function () {  

    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

    var linkFieldContext = {};

    linkFieldContext.Templates = {};

    linkFieldContext.Templates.Fields = {

        "Attachments": { "View": AttachmentsFieldTemplate }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFieldContext);

})();



function AttachmentsFieldTemplate(ctx) {
    var listItemId = ctx.CurrentItem.ID;
    var listName = ctx.ListTitle;       
    return getAttachments(listName, listItemId);
}

function getAttachments(listName,listItemId) {

    var url = _spPageContextInfo.webAbsoluteUrl;
    var webServiceUrl = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + listItemId + ")/AttachmentFiles";
    var attachHtml = "";

    $.ajax({
        url: webServiceUrl,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        async: false,
        success: function (data) {
            for(var i = 0; i < data.d.results.length; i++) {
                attachHtml += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                if (i != data.d.results.length - 1) {
                    attachHtml += "<br/>";
                }                
            }          
        },
        error: function (error) {
            console.log(error);
        }
    });
    return attachHtml;
}

In the webpart properties scroll down to Miscellaneous and in the JS link reference the 2 .js files separated by the pipe. In my case it is: "~site/_catalogs/masterpage/jquery-3.6.0.slim.min.js**|**~site/SiteAssets/Show_AttachmentName.js"

James VD 0 Reputation points

2024-11-26T13:46:14.28+00:00

Hello there, is there a way to make this Solution work so you don't have to add the JS reference to each new view created?

Answer 3

Reuben Mandlenkosi Ndlovu 1

Hi Patrick, how did you manage to display the attachments of a SharePoint 2013 list item using a list view?

Share via

List View: Expand Attachments

2 additional answers

Your answer