0

Is there a way to place a hyperlink (to click on) for an attachment in list view that automatically pulls up the attachment you have on a form?

1

We can use JSLINK and jQuery for this in SharePoint 2013.

Step 1.Download the jQuery API and upload the js file into the Site Assets Document Library.

Step 2.Save the following code as a js file (AttachmentsLink.js) and upload it into the Site Assets Document Library.

(function () {

// Create object that have the context information about the field that we want to change it output render  

var attachmentsFiledContext = {};

attachmentsFiledContext.Templates = {};

attachmentsFiledContext.Templates.Fields = {

    "Attachments": { "View": AttachmentsFiledTemplate }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(attachmentsFiledContext);

})();

// This function provides the rendering logic for list view function AttachmentsFiledTemplate(ctx) { var itemId = ctx.CurrentItem.ID; var listName = ctx.ListTitle;
return getAttachments(listName, itemId); } //get attachments field properties 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 href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
            if (i != data.d.results.length - 1) {
                str += "<br/>";
            }                
        }          
    },
    error: function (err) {
        //alert(err);
    }
});
return str;

}

3.Edit the list view page and edit the list web part. Go to Miscellaneous -> JS Link.

4.Add the following URL into the JS Link textbox.

~site/SiteAssets/jquery-3.2.1.min.js|~site/SiteAssets/AttachmentsLink.js

3

Please follow these steps to display attachments in new column.

  1. Create a Multiple lines of text with rich text option column. Example I have created ‘ItemAttachments’. Reason of creating it as multiline is to display the created a href column with link to attachments.

  2. Copy the code below and paste in text file and save it as Test.js inside Layouts folder. Replace the list name ,list id and column name with yours in the code.

    var listName ="TestCL";
    var listId = "{935F312E-1ECA-4D7A-B7ED-EB0C1995B3F9}";
    var columnName ="ItemAttachments"
    var listItem;
    
    var options = {
        OnPostRender: function (ctx)  
        { 
            displayLinkForAttachment(columnName ); 
        }
    };
    
    displayLinkForAttachment = function(columnInternalName){
        var header = document.querySelector("[name="+columnInternalName+"]").parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        for (var i = 0; i < ctx.ListData.Row.length; i++) {
            listItem = ctx.ListData.Row[i];
    
            var iid = GenerateIIDForListItem(ctx, listItem);
            var row = document.getElementById(iid);
            var title = listItem["Title"];
            if(row){
                if ( listItem.Attachments.length >= 1)
                {
                    var cell = row.querySelector("td:nth-child(" + index + ")")
                    var itemAttachmentFiles = getAttachments(listItem.ID);
                    cell.innerHTML = itemAttachmentFiles;
                }
            }
        }
    }
    
     function getAttachments(itemId) {
    
        var url = _spPageContextInfo.webAbsoluteUrl;
    
        var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
    
    
        var str = "";
        $.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 href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                    if (i != data.d.results.length - 1) {
                        str += "<br/>";
                    }                
                }          
            },
            error: function (err) {
                console.log("err" + err);
            }
        });
    
        return str;
    }
    
    // Create a function for customizing the Field Rendering of our fields 
    CustomizeFieldRendering = function () {  
        console.log("in CustomizeFieldRendering");
        // Register the rendering template
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(options); 
    }; 
    
    ExecuteOrDelayUntilScriptLoaded(CustomizeFieldRendering, 'clienttemplates.js');
    
  3. Edit the page having the list and add JS link under Miscellaneous to the file you saved in point 2 in layouts folder. /_layouts/15/Test.js

enter image description here

  1. You can hide this new column in your edit or new so users cannot edit the column manually.

enter image description here

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.