Display attachments using JSLink in SharePoint
Recently I had a requirement where the customer wanted to show the actual attachment’s URL in the list view instead of default Icon. Following JSLink code will help to do that.
(function () {
var linkFiledContext = {};
linkFiledContext.Templates = {};
linkFiledContext.Templates.Fields = {
"Attachments": { "View": OverrideAttachmentFieldRendering }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFiledContext);
})();
function OverrideAttachmentFieldRendering(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 htmlString = "<span style='white-space: nowrap;'>No attachment(s)</span>";
$.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++) {
htmlString += "<a style='white-space: nowrap;' href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
if (i != data.d.results.length - 1) {
htmlString += "<br/>";
}
}
},
error: function (error) {
console.log("An error occured while fetching attachment details. Details: " + JSON.stringify(error))
}
});
return htmlString;
}