Need Idea: Multiple Attached Images Fields

Forms SharePoint Online
1

Natively, SharePoint allows for a single bucket of attachments, which normally has fit my needs but...

I have a customer that wants to categorize the attachments like having more than one attachment field. They want one for diagrams, floor plans, exterior images, interior images, etc.

First idea I had was to use Power Automate to create a picture library per list item or a folder in a single picture library and then create a folder inside that library.

Second idea, create a related list with a picture field and a category field, then the user can add new list items there and I can write custom javascript to display them.

Is there a better idea?

2

Hello @smithme,

You can create folders in the document library dynamically when the item is created and set them as root folders in List or Library control. You can find the example here.

3

I want to start out by saying thank you. This is going to work great for me.

I have reached a problem that I don't know how to get around.

In the new form I automatically create the folders I need in the Shared Documents. This is working great:

fd.spBeforeSave(function() {
    var school = fd.field('Title').value;

    var schl = pnp.sp.web.rootFolder.folders.getByName("Shared Documents").folders.add(school).then(function() {
        var diag = pnp.sp.web.getFolderByServerRelativePath("Shared Documents/" + school).folders.add("Diagrams");
        var util = pnp.sp.web.getFolderByServerRelativePath("Shared Documents/" + school).folders.add("Utilities");
        var other = pnp.sp.web.getFolderByServerRelativePath("Shared Documents/" + school).folders.add("Others");
    });
});

In the display form I am using a slideshow found on W3School. To do this I want to iterate through the files in the folder and insert the images into the slideshow. So far I can get a files object but I think it is empty and I can't figure out what to do with it. I am using this code so far:

fd.spRendered(function(ctx) {
    var schl = fd.field('Title').value;
    var diags = pnp.sp.web.getFolderByServerRelativePath("Shared Documents/" + schl + "/Diagrams").files;
    console.log(diags);
});
4

I got it to work with the following code:

fd.spRendered(function(ctx) {
    var schl = fd.field('Title').value;
    var diags = pnp.sp.web.getFolderByServerRelativePath("Shared Documents/" + schl +     "/Diagrams").files.get().then(function(d) {
        console.log(d);
    });
});
1 Like
5

I just wanted to share that the List/Library control combined with the W3School's slideshow example has resulted in a very good solution for my customer and even works well on a phone. Thank you Plumsail for your help and support.

1 Like