Create folder for child docments on New or Edit forms

[Jonathan Stamper]

I have a vLookup to a document library and I was curious, on New and Edit forms, if there is a way, that when the user clicks the add item button for vLookup:

1. The logic checks the existence of a folder in the child library (vLookupID of new and man ID if Edit) and creates it if not.
2. Routes to that created folder for the user to add their document(s)
3. Once they save and go back to the main form, the vLookup table refreshes to that newly created folder location with the docs
4. On Save of the main form, the child folder is renamed to a auto-generated ID that is tagged to a field on the main form

I’m not sure if that’s plausible but thought I would ask if/how to do.

[Jonathan Stamper]

I’m really close and decided to change the logic to only occur when a new item is initiated (dffs_ready).

1. I have it creating a folder in the child document list using the vLookupID with the “:” replaced with “_”on New Item only
2. I also did more research in the vLookup settings and am able to point the table settings to look at the folder destination using a global variable – {var:parentFolderName} and set that as the default.
3. If the user cancels the request it deletes the folder.

Where I’m stuck is hiding the destination folder field and choose field button that show up when adding an attachment. I was hoping a simple css removal in my custom css would do it but it’s not setting the display to none.

Would you have any ideas or any feedback on above or a better option?

[Alexander Bautz]

Hi,
You cannot target an IFRAME from the parent window using CSS in Custom CSS, but you can use JavaScript.

Try adding this to your Custom JS:

setInterval(function(){
    jQuery("iframe:last").contents().find("#ctl00_PlaceHolderMain_ctl05").hide();
},100);

This code will run on an interval and look for the control with ID ctl00_PlaceHolderMain_ctl05 in the contents of the last IFRAME in the page. It must run on this interval because the IFRAME is not yet created when you open the form.

You might have to inspect your upload file dialog to ensure ctl00_PlaceHolderMain_ctl05 is the ID of the table row you want to hide.

Alexander

[Jonathan Stamper]

That is perfect and it works! I was about to have to recreate my own upload page which I didn’t want to do so many many thanks!

2 more questions:

1. Does spjs.dffs.updateListItem have a renaming conventions for folders?
2. I realized that creating a folder on new item will also continue creating folders when pressing refresh or F5 on the new item form. Aside from creating an event listener on the F5 keyboard press, is there one that exists for pressing the refresh button on a browser?

Again thank you so much for all the help!!

• This reply was modified 3 years, 4 months ago by Jonathan Stamper.

[Alexander Bautz]

Hi,
spjs.dffs.updateListItem wont work for renaming folders. I wrote this function to rename folders based on this documentation: https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-with-folders-and-files-with-rest

function renameFolder(docLibRelUrl, oldFolderName, newFolderName) {
    var d = jQuery.Deferred();
    // get type
    jQuery.ajax({
        "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/GetFolderByServerRelativeUrl('" + docLibRelUrl + "/" + oldFolderName + "')/ListItemAllFields",
        "type": "GET",
        "headers": {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
        },
        "success": function (data) {
            if (data.d.ListItemAllFields === null) {
                d.reject("The folder " + oldFolderName + " was not found in " + docLibRelUrl + ".");
            } else {
                var type = data.d.__metadata.type;
                // Update folder name
                jQuery.ajax({
                    "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/GetFolderByServerRelativeUrl('" + docLibRelUrl + "/" + oldFolderName + "')/ListItemAllFields",
                    "type": "MERGE",
                    "headers": {
                        "Accept": "application/json;odata=verbose",
                        "content-type": "application/json;odata=verbose",
                        "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
                        "If-Match": "*",
                        "X-HTTP-Method": "MERGE"
                    },
                    "data": JSON.stringify({
                        "__metadata": {
                            "type": type
                        },
                        "Title": newFolderName,
                        "FileLeafRef": newFolderName
                    }),
                    "success": function () {
                        d.resolve(true);
                    },
                    "error": function (err) {
                        d.reject(err);
                    }
                });
            }
        },
        "error": function (err) {
            d.reject(err);
        }
    });
    return d.promise();
}

// Use it like this
renameFolder("/sites/YourSite/YourDocLib", "Old folder name", "New folder name").done(function (success) {
    console.log(success);
}).fail(function (err) {
    console.log(err);
});

Instead of auto-creating the folder and have to deal with detecting or preventing F5 / refresh could you not just make the creation of the folder an active choice with a button “Start adding files” that creates the folder and then show the vLookup field?

Alexander

[Jonathan Stamper]

Ah ok, I thought I had seen an old post mentioning it didn’t have a rename capability. Thanks for that info.

For the folder creation, that may be a better idea. Have a button that “initiates” the table so it can create the folder or check if the folder is there and create if not? Trying think of how to best code that up.

[Jonathan Stamper]

I think I got it. I created a button that initiates the attachment setup, creating the folders and sub folders. The only thing left is preventing the vLookup from initiating until after the attachment setup click, or would it be better to have the vLookup wrapper hidden instead and then just JQuery to show and refresh?

[Alexander Bautz]

There is no functionality in vLookup to not render the field if it is in a tab, but you can hide the table row with code and then after your create folder function has run you can refresh the vLookup table and show the table row.

You can for example use the Hidden fields section at the bottom of the Misc tab to initially hide the field, and then use this snippet to show it when you are ready:

jQuery("#dffs_vLookupDocuments").removeClass("spjshidden");

In this example vLookupDocuments is the name of the vLookup column.

[Jonathan Stamper]

For some reason, when ran in dffs_ready, the button or table won’t show/hide initially until I go to another tab then return to the attachments. No issues in the code nor on the console. I do have the setting turned on to remember where you left off on the form. Could that be causing he issue or maybe Should put them in an onload/ready function?

Actually as an update, I turned off the “remember” functionality but that causes me to have to click the attachments tab, click another tab then back to attachments to see the button or table.

• This reply was modified 3 years, 4 months ago by Jonathan Stamper.

[Jonathan Stamper]

I got it working. I ended up just using the .css(“visibility”,”visible/hidden”) action with conditionals for the button and table.

I couldn’t get options mentioned for spjshidden to work without it reappearing when I clicked to another tab or showing once I clicked to another tab and then returned.

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Jonathan Stamper]

Using the code above, on occasion it doesn’t rename the child vLookup folder and provides no errors in the log. I think it may have to do with either timing during submission and/or browser compatibility where some users still prefer IE…not sure why though…

Curious if you had any thoughts and/or other solutions? Also, based on background below, could drag and drop be used?

What I’m doing:

• On new form a user selects the attachments tab showing only attachment set up button.
• Clicking the button creates a “temp” folder using the vlookup ID (“:” converted to “_”) in the child doc library. 3 sub-folders are also created and one of the sub-folders is where the attachments go linking to parent. It’s always the same sub-folder.
• The vLookup table and attach file button appears the user can then attach their files (curious about drag and drop here) and they are also required to select from a drop down to add the attachment.
• When the user submits the new form, a programmatic id is created (not a fan of this but they want it). That id is then used to rename the folder on the doc lib.

I tried to create something to check for the renaming when saving in edit form and that’s when I noticed it not always renaming.

• This reply was modified 3 years, 1 month ago by Jonathan Stamper.

[Alexander Bautz]

If you trigger the code for renaming the folder in the PreSaveAction when saving the form you must make the code synchronous. By default ajax is asynchronous and the request will not have time to complete before the save function redirects you out of the form.

Try adding this to the two ajax requests in the code snippet (add it for example below “type”:

"async": false

Alexander

[Jonathan Stamper]

Ah, yep! The more I dove into it the more I was wondering that being the case also. I just put that in and will try that out. Much appreciated.

With that setup I described I wouldn’t be able to use drag and drop because I’m requiring a metadata selection on each attachment.

• This reply was modified 3 years, 1 month ago by Jonathan Stamper.

[Author]

Posts