PnPjs fails inside fd.spSaved when NewForm opens in full screen (works in side panel)

Forms SharePoint Online
1

Hi everyone,

I'm currently working with Plumsail Forms and facing a strange behavior when using PnPjs inside the fd.spSaved event.

When the NewForm opens in side modal, everything works perfectly. But when it opens in full screen, the PnP-related code inside fd.spSaved fails silently or throws errors (like Failed to fetch).

I'm still new to Plumsail development and not sure if I'm missing something obvious. I'd really appreciate any help.

Here are the two approaches I’ve tried:

First attempt: using default pnp.sp.web

fd.spSaved(async function (result) {
    const tempFolderPath = `${window.libraryName}/${window.folderName}`;
    const finalFolderPath = `${window.libraryName}/${result.Id}`;

    try {
        await createFolder(result.Id);
        .....
    } catch (error) {
        alert("Unexpected error during post-save process: " + error.message);
    }
});

async function createFolder(itemId) {
    try {
        await pnp.sp.web.getFolderByServerRelativeUrl(window.libraryName).folders.add(itemId.toString());
    } catch (error) {
        alert("Failed to create the folder: " + error.message);
    }
}

Second attempt: creating a Web instance manually

async function createFolder(itemId) {
    try {
        let web = new pnp.sp.Web(_spPageContextInfo.webAbsoluteUrl);
        await web.getFolderByServerRelativeUrl(window.libraryName).folders.add(itemId.toString());
    } catch (error) {
        alert("Failed to create the folder: " + error.message);
    }
}

In both cases, the folder creation only works when the form is opened in the side panel. When it’s full screen, the PnP methods fail or seem to lose context.

Has anyone faced this before?
Is there something I need to reconfigure or force when in full screen mode?

Thanks in advance

2

Hello @thailakadre,

Welcome to the Plumsail Community!

Please test the form in incognito mode as this could be the related to the browser cache.

3

Hi Margo,

Thanks for your reply.

I’ve tested the form in incognito mode, on different computers, and with different user accounts. I also cleared the cache before testing again.

To further isolate the issue, I added the following simple test inside the fd.spSaved event:

console.log("[spSaved] Checking PnP context...");
console.log("typeof pnp:", typeof pnp);
console.log("typeof pnp.sp:", typeof pnp?.sp);
console.log("typeof pnp.sp.web:", typeof pnp?.sp?.web);
console.log("pnp.sp._root:", pnp?.sp?._root);

try {
    const webTitle = await pnp.sp.web.select("Title").get();
    alert("[spSaved] Connected to site: " + webTitle.Title);
} catch (err) {
    alert("[spSaved] PnP context likely broken.");
}

This works perfectly when the form is opened in a side modal, but fails when the form is in full screen. The error usually shows as a Failed to fetch, or the context is simply undefined.

Interestingly, fd.spRendered works in both cases. It seems the PnP context behaves differently depending on how the form is loaded.

Do you know if there are limitations or differences in how Plumsail loads forms in full screen that could affect the PnP context?

Thanks again for your help!

4

@thailakadre,

spSaved() is a synchronous event, which is why the asynchronous PnP function fails

Please run PnP function inside spBeforeSave() event.

1 Like