Child List attachments

Forms SharePoint 2019
1

Hi,
I'm looking for a way how to enable user who opens form in Edit to get list of URLs of Attachments from Child List. Parent and Child are referenced by field RequestNumber.
I thought we can use List control but we can not get attachments URL displayed instead of icon.

I also tried to get all of URLs via pnp and add them to a html control, but without success. I'm not that skilled in JS, to get those URLS and what is strange I couldn't add content to htmlControl.

image

Can you help me with this?

2

The goal is to let users (approvers) click icon of attachment or just link so they can comfortable access and view attached files.

image
image855×354 18.2 KB

Or like you can click on link on Display form of child list.

image
image802×297 7.43 KB

3

Hello @Marcin,

The easiest would be connecting the List or Library control to a library. Thus user will be able to open files in one click from the parent form.

You can design the Edit form for a library files so that the file properties contains all information you need.

4

Hello,
Thank you for quick reply.
I have already tried this attempt. But have met 2 obstacles:

  1. Attachment file name must be unique for library - of course I can try with dynamic folders or change file name with code (I haven't tried but assume it is possible).
  2. Upload opens windows explorer window instead of prepared Form. I created new library, added required Lookup, and my own fields like document type - user assigns from ddl, requestnumber from parent - additional reference to filter control). In parent form I changed to Editing :: Dialog.
    What could go wrong here?
5

Hello @Marcin,

You can get URLs of all files attached to child items using PnP request. Add the Rich text control to the form, update list name and the site URL in the code.

var id = fd.itemId;
var fileURL = [];
var html = '';

pnp.sp.web.lists.getByTitle("ListName").items.filter("ParentId eq " + id).get().then(function(items) {
    items.forEach(function(item) {
        pnp.sp.web.lists.getByTitle("ListName").items.getById(item.Id).attachmentFiles.select("ServerRelativeUrl")().then(function(file) {
            if (file.length > 0) {
                file.forEach(function(f) {
                    fileURL.push(f.ServerRelativeUrl)
                })
            }
        })
    })

    return fileURL

}).then(function(fileURL) {
    setTimeout(function() {
        for (let j = 0; j < fileURL.length; j++) {
            html += '<a href="' + 'https://contoso.sharepoint.com' + fileURL[j] + '">' + 'File ' + j + '</a> <br>'
        }
        $(fd.control('RichText1').$el).html(html)
    }, 1000)
});
6

@mnikitina Thank you! Your code is very supportive.
I had seen earlier similar code on this Community but it was not fully clear how to get to items in second API call.

I have finally ended with such an table:

image
image891×227 14.9 KB

with this code:

function getAttachmentsTable(rnumber) {
var tableheader = '<table class="table table-hover"><thead><tr><th scope="col">Document Type</th><th scope="col">Attachment</th></tr></thead><tbody>';
var tablerows = '';
var tablefooter = '</tbody></table>';
pnp.sp.web.lists.getByTitle('Attachments').items
    .filter("RequestNumberTMP eq '" + rnumber + "'")
	.get().then(function (items){items.forEach(function (item) {
		pnp.sp.web.lists.getByTitle('Attachments').items.getById(item.Id)
		    .select('AttachmentFiles', 'DocumentType').expand('AttachmentFiles')
			get().then(function (result) {
                tablerows += '<tr><td>'+ result.DocumentType + '</td><td>';
				tablerows +='<a href="' + 'https://sharepoint' 
                    + result.AttachmentFiles[0].ServerRelativeUrl 
                    +'" target="_blank">' + result.AttachmentFiles[0].FileName 
                    + '</a></td></tr>';
                return tablerows;
                });
		});
    });
setTimeout(function () {$(fd.control('attList').$el).html(tableheader+tablerows+tablefooter);},  1000);

}

where rnumber is value of my lookup field.
I skipped ForEach for Item's attachments since earlier I force user to keep only one attachment in Child listitem.

I do really appreciate your support here! :slight_smile:

1 Like