Wizard: Create Sub-Folder in connected Documents Library without "Save" possible

Forms
1

Hi,
i would like to do the following:
I have a wizard with 6 Steps.
In the first step the user enters a Project name.
In the 4th Step i have a 2 linked Documents Library where i would like to give the user the possibility to upload documents -> but i would already need sub-folders with the project name defined in step 1.

Is there a way to make this happen?
If not, is there a way that they upload the documents and when clicking save that i move the documents from the root folder to the created sub-folder?

thanks a lot in advance for a hint how to make it happen
Andreas

2

Hello @andreas,

Welcome to Plumsail Community!

You can create a folder using PnPjs library. Find a code example in this post.

Once the folder is created, you can change the List or Library root folder. Thus users can upload files to this newly created folder only.

You can execute the code when moving to the next wizard step.

3

Hello @Margo,
thank you so much for your reply, i will check all the info you provided and come back to you in case of anything unclear - but seems straight forward from what i read.

Just one last question:
i guess it should work, just to be sure. When i am able to detect a wizard step change, i would also be able to set the content of the "Project name" from the first step to a (for the user) "hidden" field which would be the project folder name -> just want to prevent that when the project name gets changed later on that we run into troubles with folder names -> so i would make a fixed name then which can't be edited.

Makes that sense or is there already in the process of creating a new list item an ID available which i could use? i didn't found anything...

Thanks again!

4

Yes, this is a goof idea. You can pass value to the hidden field on wizard step change too. Thus you can prevent multiple folders creation.

5

Hi @Margo
i am struggling with getting the code to work - i would like to run it only when foldername is still empty and a wizard change is detected... but don't know how to connect the dots..

fd.spRendered(function () {
fd.container('TSIWorkbookWizard').widget.$on('on-change', function() {
//copy projectname to foldername
fd.field('FolderName').value = fd.field('Projectname').value
var agentName = fd.field('Foldername').value;
//create folder in ProductCataloguesAttachments document library
var folder1 = pnp.sp.web.lists.getByTitle("ProductCataloguesAttachments").rootFolder.folders.add(agentName);
//create folder in Outgoing document library
var folder2 = pnp.sp.web.lists.getByTitle("SampleTicketsAttachments").rootFolder.folders.add(agentName);
} );
});

thanks a lot
Andreas

6

Hello @andreas,

You need to add the condition to check that the folder is empty, like this:

fd.container('TSIWorkbookWizard').widget.$on('on-change', function() {
        if(!fd.field('FolderName').value) {
                //code to create folder 
        }
        else {
                console.log('folder already exists')
        }
});
7

Hello @Margo

thanks for your answer,
i am now able to create the folders at the right place.
Where i now have an issue is that i would also need to change after creation the root folder.
So, i am able to recognize when a wizard step is changed and i am creating the folder before the step is opened where i would need to set the root folder of 2 diffferent "SPDataTable".

This is right now, what i use as code to create the Folder.

What do i need to do that i can also set the root folder? i tried this one:

               //create folder in ProductCataloguesAttachments document library
                var folder1 = pnp.sp.web.lists.getByTitle("ProductCataloguesAttachments").rootFolder.folders.add(TempFoldername);
                //create folder in Outgoing document library
                var folder2 = pnp.sp.web.lists.getByTitle("SampleTicketsAttachments").rootFolder.folders.add(TempFoldername);
                return Promise.all([folder1, folder2]);
                //var agentName = fd.field('Order Number').value + dmy;
                fd.field('FolderName').value = TempFoldername;
                
                // After Folders have been created also change the root folder that the documents get uploaded into the correct created folder
                
                var dt = fd.control('SPDataTable4');
                dt.ready(function() {
                    setRootFolder();
                });

                //set root folder when Category field changes
                fd.field('FolderName').$on('change', function() {
                    setRootFolder();
                    });

                function setRootFolder(){
                    alert('RootFolderSet ');
                    var category = fd.field('FolderName').value;
                    if(category){
                        dt.baseRootFolder = category;
                        dt.rootFolder = category;
                        }
                    }
8

Hello @andreas,

return Promise.all([folder1, folder2]); — can be used in asynchronous functions only.

Try out change the code like this:

var dt = fd.control('SPDataTable1');
pnp.sp.web.lists.getByTitle("ProductCataloguesAttachments").rootFolder.folders.add(TempFoldername).then(function(){
 fd.field('FolderName').value = TempFoldername; 
 //set root folder when the form loads
 dt.ready(function(dt) {
  setRootFolder(dt);
 })
})
9

Hello @Margo

thanks a lot - just gave it a try and seems to work like it should!
Will do some more tests and come back to you if needed.

have a nice day
Andreas

1 Like