How to set pop up notifications when clicking back button?

ERPNext
,
1

Hi,

i want to set an alert notification saying ‘Do you want to go back?’ and 2 buttons YES and NO, when clicking on back button in the browser.

can anyone help me out to implement this?

2

Hi @Rohith_Mohanan,

Here check its syntax.

frappe.ui.form.on('Your DocType', {
	refresh(frm) {
		frm.add_custom_button(__("Button"), function() {
				frappe.confirm('Are you sure you want to proceed?',
				() => {
				    // action to perform if Yes is selected
				    frappe.msgprint("Say Yes");
				}, () => {
				    // action to perform if No is selected
                    frappe.msgprint("Say No");
                });
		});
	}
});

Thank You!

1 Like
3

@Rohith_Mohanan I believe that this is the code you are looking for.

frappe.ui.form.on('DocType Name', {
	refresh(frm) {
	    function refreshBackHandler(e, target) {
	        // target is 0 = refresh & target is 1 = back
	        e.preventDefault();
            // This is the normal way
            // return e.returnValue = 'Are you sure you want to proceed?';
            // This is the custom way but I'm not sure if it will work in all browsers or not
			frappe.confirm('Are you sure you want to proceed?',
    			function() {
    			    // action to perform if Yes is selected
    			    frappe.msgprint("Say Yes");
    			    clearHandlers();
	                // continue refresh
	                if (target == 0) window.location.reload();
	                // continue back button
	                else if (target == 1) window.history.go(-1);
    			}, function() {
    			    // action to perform if No is selected
                    frappe.msgprint("Say No");
                });
		}
	    function clearHandlers() {
	        // remove refresh
    		removeEventListener('beforeunload', refreshHandler, {capture: true});
	        // remove back button
	        removeEventListener('popstate', backHandler);
        }
		function refreshHandler(e) { return refreshBackHandler(e, 0); }
		function backHandler(e) { return refreshBackHandler(e, 1); }
        clearHandlers();
		// catch refresh
		addEventListener('beforeunload', refreshHandler, {capture: true});
		// catch back button
		addEventListener('popstate', backHandler);
	}
});

If this post was the solution, please don’t forget to mark it so others can easily find it.

4

i will try this… thanks a lot

5

@NCP thank you for your help. really appreciated

6

@kid1194 i tired the code. but i faced an issue that even before we click “yes” it will go back. and if we click on yes, it will go back once more.

7

@Rohith_Mohanan After reviewing the Frappe form code, in terms of form reload, they actually check if the form is dirty (has unsaved values) then a prompt is displayed confirming the action.
But in terms of back button press, I have tried to do the same but without any success since Frappe doesn’t rely on the browser history.

So, I haven’t found a way to do what you want. I’m sorry for that.

Fyi, even if there is a way, setting that for a specific doctype will also set it for the whole ERPNext since it relies on manipulating the window which is global object. But if you refresh the page outside that specific doctype, then it will be removed.