none
Show Attachments in a SharePoint Box List View with JSLink RRS feed

  • Question

  • Hello,

    I created a SharePoint Boxed List view and only the paper clip is showing for attachments. The customer would like for every attachment for the list item to show as a document and need to be clickable, so that the document can open up. This is my last requirement for the site. Any help appreciated.

    Mike


    SharePoint Engineer - Mike


    Tuesday, May 2, 2017 2:54 PM

Answers

  • Hi Mike,

    For Boxed View, we can add the following code into a content editor web part to achieve it.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	$(".ms-listviewtable .ms-stylebox").each(function(){
    		if($(this).find("img[title='Attachment']").length>0){
    			var url=$(this).find("a[href*='listform.aspx']").attr("href");
    			var listGUID=getParameterByName("ListId", url).replace("{","").replace("}","");
    			var itemId=getParameterByName("ID", url);
    			$(this).find("img[title='Attachment']").parent().append(getAttachments(listGUID,itemId));
    		}
    	});
    });
    function getAttachments(listGUID,itemId) {
      
        var url = _spPageContextInfo.webAbsoluteUrl;
        var requestUri = url + "/_api/web/lists(guid'"+listGUID+"')/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;
    }
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, May 4, 2017 3:54 AM
    Moderator

All replies

  • Hi Mike,

    Please follow the steps below:

    1. Select the "Attachments" field in list view.

    2. Save the following code as a js file(showAttachments.js) and then upload the file into Site Assets document library.

    (function () {
        (window.jQuery || document.write('<script src="//code.jquery.com/jquery-3.1.0.min.js"><\/script>'));
        //Create object that have the context information about the field that we want to change it output render  
        var linkFiledContext = {};
        linkFiledContext.Templates = {};
        linkFiledContext.Templates.Fields = {        
            "Attachments": { "View": AttachmentsFiledTemplate }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFiledContext);
    })();
    
    // 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);
    }
    
    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. Add the following reference in JSLINK in list view web part.

    ~site/SiteAssets/showAttachments.js

    When you apply the JSLINK, the list view will change the "style" like default view style.

    If you still want to use the Boxed style, we can only use jQuery to achieve it.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Wednesday, May 3, 2017 6:33 AM
    Moderator
  • I have Jquery-2.2.3....will that version work or do I need to download the 3.1.0 version?

    SharePoint Engineer - Mike

    Wednesday, May 3, 2017 1:57 PM
  • I'm now sure why, but this doesn't work. It un-formats the Boxed View and the attachments never shows up.

    Mike


    SharePoint Engineer - Mike

    Wednesday, May 3, 2017 2:17 PM
  • Hi Mike,

    For Boxed View, we can add the following code into a content editor web part to achieve it.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	$(".ms-listviewtable .ms-stylebox").each(function(){
    		if($(this).find("img[title='Attachment']").length>0){
    			var url=$(this).find("a[href*='listform.aspx']").attr("href");
    			var listGUID=getParameterByName("ListId", url).replace("{","").replace("}","");
    			var itemId=getParameterByName("ID", url);
    			$(this).find("img[title='Attachment']").parent().append(getAttachments(listGUID,itemId));
    		}
    	});
    });
    function getAttachments(listGUID,itemId) {
      
        var url = _spPageContextInfo.webAbsoluteUrl;
        var requestUri = url + "/_api/web/lists(guid'"+listGUID+"')/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;
    }
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, May 4, 2017 3:54 AM
    Moderator