Warning mesaage need for every doctype when Log out or Close

ERPNext
1

Dear Community,

Here if I enters datas and leave without saving the warning message should popup like “The Data not saved need to leave?” also need if i close the tab it should ask “confirmation of logout”.
How to do that,

I tried some code buy it not works,

frappe.ui.form.on('*', {
    setup: function(frm) {
        window.onbeforeunload = function() {
            if (frm.is_dirty()) {
                return 'You have unsaved changes. Do you really want to leave?';
            }
        };
    },
    on_submit: function(frm) {
        // Remove the warning on successful save or submit
        window.onbeforeunload = null;
    },
    refresh: function(frm) {
        // Also clear the warning if the form is refreshed after save
        if (!frm.is_dirty()) {
            window.onbeforeunload = null;
        }
    }
});

Please help me to solve this,

thank you

2

Please check the concept:

You have to define it in the utils.js

3

its about time duration sir how about warning msg?

4

Don’t focus on the topic title, just check the script. if you want to apply for all doctype then check the first reference (Add custom script to all doctypes)

5 
$(document).on('app_ready', function() {
    $.each(["Service Request",  "Quotation", "Supplier Quotation", 
        "Sales Invoice", "Sales Order","Purchase Invoice", ], function(i, doctype) {
            frappe.ui.form.on(doctype, {
                refresh: function(frm) {
                  
                    // Add confirmation prompt for unsaved changes
                    window.addEventListener('beforeunload', function (e) {
                        if (frm.is_dirty()) {
                            var confirmationMessage = "The document is not saved. Are you sure you want to exit?";
                            (e || window.event).returnValue = confirmationMessage; // For older browsers
                            return confirmationMessage; // For modern browsers
                        }
                    });
                }
            });
    });
});

I try it not work did I miss some thing? in client script i give doctype as Service request

6

No idea about your code concept, but you can test my reference code. If the reference code works, then the issue is in your code. If the reference code does not work, then the issue is from your side.

7

Your script worked well, I tested but you can’t change the warning message.

8

can you pls share the video format may i figure out which problem i face and easy to rectify

bcs what i need is if i edit some data in doctype without save then i try to close or logout it should show warning msg like “The document is not saved. Are you sure you want to exit?”

9

you can’t change the warning message, please check it.

10

can i able to add in client script if yes means under which doctype i place

11

If you want to apply for a single doctype, you can do so normally.

            frappe.ui.form.on("Sales Order", {
                refresh: function(frm) {
                // ... you code

If you want to apply for multiple doctypes, the necessary references have already been provided.

12

Hi @Rizwaan,

Please check the process, if you want to develop the custom app.

13 
frappe.ui.form.on('Service Request', {
    refresh: function(frm) {
        let isNavigatingAway = false;

        // Function to show confirmation dialog
        function showExitConfirmation(message) {
            if (frm.is_dirty() && !isNavigatingAway) {
                // Show a confirmation dialog and return true if "OK" is clicked
                return confirm(message);
            }
            return true;
        }

        // Common confirmation message
        const confirmationMessage = "Changes you made may not be saved.";

        // Add confirmation prompt for unsaved changes when closing the site
        window.addEventListener('beforeunload', function(e) {
            if (frm.is_dirty() && !isNavigatingAway) {
                var confirmationMessage = "Changes you made may not be saved.";
                (e || window.event).returnValue = confirmationMessage; // For older browsers
                return confirmationMessage; // For modern browsers
            }
        });

        // Handle click on the home logo (Frappe logo or custom logo)
        $('header .navbar-home').on('click', function(e) {
            if (frm.is_dirty() && !isNavigatingAway) {
                e.preventDefault();
                if (confirm(confirmationMessage)) {
                    isNavigatingAway = true;
                    window.location.href = $(this).attr('href');
                }
            }
        });

        // Handle back button navigation
        window.addEventListener('popstate', function(e) {
            if (frm.is_dirty() && !isNavigatingAway) {
                e.preventDefault(); // Prevent default action
                if (confirm(confirmationMessage)) {
                    isNavigatingAway = true;
                    history.back();
                } else {
                    history.pushState(null, null, location.href); // Keep user on the same page
                }
            }
        });

        // Push the current state to the history stack to handle back navigation
        history.replaceState(null, null, location.href);
    }
});

I tried that it works but even OK and Cancel Plays same Role,

If am Select “Cancel” It should stay on that page

in this code Browser logic works fine only Back button and Nav bar had this cancel issue.

Please help me to sort out