Make List Item Attachment link clickable with JSLink

Question

I am generating a link to a List Item's attachments using the following code. It works perfect, but it is slowing down the loading / paging of my List view significant. Does anybody know of a more efficient way in doing this? Can this be done OOB, or would I have to switch to a document library instead of a custom list?

overrideContext.Templates.Fields =
{
    'Attachments': { 'View': GenerateAttachmentLink }
};

function GenerateAttachmentLink(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 = "";
    // execute AJAX request
    $.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 target='_blank' href='" + data.d.results[i].ServerRelativeUrl + "'>" +
                    "<img border='0' width='16' src='/_layouts/15/images/attach16.png?rev=23'></a>";
                if (i != data.d.results.length - 1) {
                    str += "<br/>";
                }
            }
        },
        error: function (err) {
            //alert(err);
        }
    });
    return str;
}

EDIT: I have Even tried moving this to OnPostRender but the DOM still locks up. Any way to make this asynchronous?

Answer 1

The Question contains a workable solution to make List Attachments clickable. But it isn't feasible when loading dozens of columns and rows, the performance is noticeably affected.

Instead, the link should be generated on demand, when the user clicks. Here is a modification on the above code to make it work. This shaved about 3.5 seconds of my loading and paging times:

function GenerateAttachmentLink(ctx) {
    var itemId = ctx.CurrentItem.ID;
    var listName = ctx.ListTitle;

    var link = "<a href='javascript:getAttachments(" + itemId + ",\"" + listName + "\")'>" +
    "<img border='0' width='16' src='/_layouts/15/images/attach16.png?rev=23'></a>";

    return link;
}

//Now When the user click the PaperClip, the JS function will be called with the REST service

function getAttachments(itemId, listName ) {

    var url = _spPageContextInfo.webAbsoluteUrl;
    var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
    var str = "";

    // execute AJAX request
    $.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 = data.d.results[i].ServerRelativeUrl;
            }
        },
        error: function (err) {
            //alert(err);
        }
    });
    window.open(str);
}