Stop Browser Autofill from Corrupting Data on Tab Duplication

[Alexander Bautz]

When a user duplicates a browser tab containing a SharePoint EditForm customized with DFFS (Dynamic Forms for SharePoint), the browser tries to autofill the form fields to preserve data.

However, because DFFS often rearranges the field order using tabs, the browser’s default autofill mechanism can map the wrong values to text fields, choice fields, and boolean fields, potentially corrupting the data.

To prevent this data corruption, you can use the following JavaScript code in your Edit Form’s Custom JS section. It detects a duplicated tab or navigation to a form using the browser back / forwards buttons and forces a page reload to ensure the form loads correctly.

(function() {
    // To ensure correct data entry, this function checks for history navigation (back/forward) or tab duplication. 
    // If either occurs, you'll be prompted to reload the page. 
    // This action is necessary because field rearrangements in the DFFS form can otherwise cause the browser to assign values to the wrong fields.
    try {
        const navEntries = performance.getEntriesByType("navigation");
        let needsReload = false;
        if (navEntries.length > 0) {
            const type = navEntries[0].type;
            switch (type) {
                case "back_forward":
                    needsReload = true;
                    break;
                default:
                    // Normal reload
            }
            if (needsReload) {
                spjs.dffs.alert({
                    "title": "Required Page Refresh",
                    "msg": "You've navigated using your back/forward buttons or duplicated this tab. A page refresh is needed to load the form data properly.",
                    "ok": function() {
                        spjs.dffs.alert({
                            "title": "Reloading",
                            "msg": "Working on it...",
                            "noBtn": true
                        });
                        // Navigate/Reload the page
                        location.href = location.href;
                    }
                });
            }
        }
    } catch (e) {
        console.warn("PerformanceNavigationTiming API not supported.");
    }
})();

Post any questions below.

Alexander

• This topic was modified 3 months, 2 weeks ago by Alexander Bautz. Reason: Changed code to also detect forward/backwards buttons for navigation to a form

[Keith Hudson]

Is this already handled in Modern DFFS, or do we need to add this code to our MDFFS form configs?

[Alexander Bautz]

This only applies to the Classic DFFS because of how the form is built. The classic DFFS manipulates the default form and rearranges the form elements with code – it is this that can cause a mapping error when the browser autofill the form on the duplicated tab.

Alexander

[Alexander Bautz]

I have updated the code snippet in the top of this post to also detect using forwards / backwards button navigation as this also causes this issue.

Alexander

[Author]

Posts