3

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:-

enter image description here

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:- enter image description here

so is there a way to overcome this temporary error message which is being displayed??

4

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):

enter image description here

Reference - Show Attachments with JSLink

  • can you check my edit,,now you jslink will work ,, but i am getting an error when the list view first loads... – john Gu May 16 '17 at 22:32
  • have updated the answer, please check with the 2nd option. Regarding issue with first option, looks like issue with jquery loading/conflicting, can't really say for sure why its happening. – Gautam Sheth May 17 '17 at 4:53
  • now the second script (pure javascript) will not show any temporary errors.. but it will wok for one time only.. and i need to keep doing full refresh to the web page to get it working well..could this problem related to the Minimum download strategy which is enabled on the site ? – john Gu May 17 '17 at 11:17
  • 1
    Yes that correct, it will make one ajax call per list item, which means 30 rest api calls for the view. – Gautam Sheth May 17 '17 at 12:26
  • 1
    Looks like Microsoft has dropped the ball here :) , cant think of a better way, would have added it in the answer if i could ;) , here 30 REST calls are necessary unfortunately. In case of a custom webpart, we can get it in one REST call but not in OOTB list. – Gautam Sheth May 17 '17 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.