Customizing default save button

[Sumith-2004]

Hello everyone,
I want to change the “Save” button which is located on the top right corner of the lead doctype to bottom of the page.
My doubt is,
Is it possible to change the existing save button on ERPNext?
Is it cause any issues, if i change it means?

Can i modify the code in ERPNext code. or i want to create a custom app for this also?

[avc]

Hi @Sumith-2004:

You can modify the code … but changes will be gone with further updates.
Best practice is creating custom app. For this kind of desk “witchery”, use app_include_js and app_include_css hooks

https://frappeframework.com/docs/user/en/python-api/hooks#desk

Hope this helps.

[Sumith-2004]

Ok, shall i use client script for this process.

[avc]

Hi @Sumith-2004:

Something like this should works …

frappe.ui.form.on('Item', {
	onload(frm) {
		var primary_button_group = frm.page.btn_primary;
        var form_wrapper = frm.$wrapper;
        
        // Remove the button from the top
        primary_button_group.detach();

        // Append the button group to the bottom of the form
        form_wrapper.append('<div id="custom-save-button-container" style="text-align: right; margin-top: 20px;"></div>');
        $('#custom-save-button-container').append(primary_button_group);
	}
})

But note that will be needed a client script for every doctype form view …
Using app_include_js you’d can manage it globally.

Hope this helps.

[Sumith-2004]

Thank you for it. but actually i tried another way but similar to this i think.

This is my code :
frappe.ui.form.on(‘Lead’, {
refresh: function(frm) {
// Use setTimeout to ensure the button is rendered before manipulating it
setTimeout(function() {
// Select the Save button using its classes
let save_button = frm.page.wrapper.find(‘.primary-action’);

        // If the button exists, move it to the bottom of the form
        if (save_button.length > 0) {
            // Hide the default Save button initially
            save_button.hide();

            // Create a new div to hold the Save button at the bottom
            let custom_button_div = $('<div>')
                .css({
                    'text-align': 'center',
                    'margin-top': '20px',
                    'position': 'relative',
                    'bottom': '0',
                    'width': '100%'
                })
                .appendTo(frm.$wrapper.find('.form-layout'));

            // Append the Save button to the new div
            save_button.appendTo(custom_button_div);

            // Show the relocated button
            save_button.show();
        }
    }, 1000); // Delay of 1 second to ensure the button is fully rendered
}

});

And now my save button is changed

[Syed_Ahamed]

This code only for “save buttom”? Not for “Action” buttom Right?

[Sumith-2004]

It change the save button location and also the action of save button.

[Syed_Ahamed]

Yes. But, Im asking about the action button. After Save the Action button should appear.
Im asking abt that action button.

[Sumith-2004]

No this code note change the action button, i only changed the save button.

[Syed_Ahamed]

ok. Thank You