none
Is there any way to show the actual Attachment links inside the list BOXED view for a custom list ? SharePoint Online RRS feed

  • Question

  • Dear Sirs,

    In SharePoint Online, we are using a List with BOXED style view. (classic view)

    Attachments are not visible, so we would like to display the attachment like the below.

    Is it possible to be done ? We also tried to apply some other solutions using JavaScript but without success.

    Any tip would be much appreciated.

    Monday, July 22, 2019 1:36 PM

Answers

  • Try with the below code:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="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>
    Thanks & Regards,


    sharath aluri

    Monday, July 22, 2019 6:23 PM
  • Hi,

    Please add the code into script editor web part in the list view directly to check if it works.

    Best Regards,

    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by michaalis Wednesday, July 24, 2019 8:22 AM
    Tuesday, July 23, 2019 7:14 AM
    Moderator

All replies

  • Try with the below code:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="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>
    Thanks & Regards,


    sharath aluri

    Monday, July 22, 2019 6:23 PM
  • Hi,

    If Sharath's reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, July 23, 2019 2:47 AM
    Moderator
  • Hi Sharath,

    Thank you for your reply.

    But I tried the above without success...(Use content editor web part, reference to the .js file in the Site Assets)

    Are you sure that it's working in SharePoint Online ?


    • Edited by michaalis Tuesday, July 23, 2019 6:33 AM
    Tuesday, July 23, 2019 6:33 AM
  • Hi,

    Please add the code into script editor web part in the list view directly to check if it works.

    Best Regards,

    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by michaalis Wednesday, July 24, 2019 8:22 AM
    Tuesday, July 23, 2019 7:14 AM
    Moderator
  • Yes it worked in SharePoint online and just use the Script Editor as Dennis Said and you don't have to point .js to your Site Assets. I already added the .js url from the code. Just paste as it is in the Script Editor and try it. 

    Thanks & Regards,


    sharath aluri

    Tuesday, July 23, 2019 10:59 AM
  • OK Sharath and Dennis,

    Thanks a lot for your replies and assistance.

    It works now, let me share few things

    1) It works only with "Script Editor" web part directly embedded to a separate page and not using "Content Editor".

    2) It works only if you display the below Title columns (ticked in blue)

    Tuesday, July 23, 2019 2:07 PM
  • Hi,

    Glad to hear that you solve this issue, thanks for your sharing.

    If my suggestion help you, you can also mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, July 24, 2019 1:57 AM
    Moderator