Is there a way to show the actual Attachment links inside the list view for my custom list
-
21-12-2020 - |
题
I have added a custom list inside my sharepoint 2013. and i chose to attach a file inside my list item from "Edit Tab">>"Attach File". but when i chose to display the "Attachment" field inside my list view , i will get the following symbol:-
instead of the actual attachment link/s?? so is there a way to fix this ?
EDIT now based on @Gautam reply, i tried this JSLINK , and it worked :-
(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;
}
but the problem i am facing is that when i click on the list view i will get the following error for a couple of seconds, then the page will refresh automatically and show the attachments correctly:-
so is there a way to overcome this temporary error message which is being displayed??
解决方案
Option 1 - not sure why its showing error, works at my end. Could be something to do with jquery loading issue.
You can the below jsLink
to show the attachments:
(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;
}
Option 2 - using pure javascript ajax calls, you can use the below code as well :
(function () {
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 = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', webServiceUrl , false);
xmlhttp.setRequestHeader('accept','application/json;odata=verbose');
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
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/>";
}
}
}
}
};
xmlhttp.send(null);
return attachHtml;
}
Once you attach the jslink to the list, it shows the file name (see below screenshot):
Reference - Show Attachments with JSLink