Try ERPNext Buy Support Partners Foundation

Add button in list view item

Add a new button same the button new, menu, refresh, in list view (item)

Hi,

What do you mean exactly? you need to add button same like on item list view or any another else

Goto setup>custom script
add custom script for item doctype
script:
frappe.ui.form.on(“item”, {
refresh: function(frm) {
// use the __islocal value of doc, to check if the doc is saved or not
frm.add_custom_button(“Say Hello”, function() {
frappe.msgprint(“Hello”);
},“Options”)

I need add button here …next the button (manu)

you need to check

list_view.js
but its generic if you change here it will reflect to all list view of the forms

but i can’t add the new button, i modificate the item_list.js but don’t show the button

Any way/suggestion to do the same using custom script ??

1 Like

Bumping to prevent making another post about this.

Is there anyway to do this without editing list_view.js or base_list.js?

This is the hack I was able to come up with:

// this will help prevent duplicate calls
let added = false;

// This function is called any time the page is updated
$(document).bind('DOMSubtreeModified', function () {
    if ('List/Sales Invoice/List' in frappe.pages && frappe.pages['List/Sales Invoice/List'].page && !added) {
        added = true;
        frappe.pages['List/Sales Invoice/List'].page.add_action_item('Export to Quickbooks', function(event) {
            // Convert list of UI checks to list of IDs
            let selected = [];
            for (let check of event.view.cur_list.$checks) {
                selected.push(check.dataset.name);
            }
            // Do action
        });
        
    }
});

This adds an Action Item button to the Sales Invoice List page only; but with the .page object, you can do anything needed with the Page API (add a normal menu item, change page title, etc).

To the Frappe team, is there a better way to do this?

The good practice is to do it by this way :slight_smile:

Thank you for your input, but this did not fit my specific use case.

I needed to add to the Sales Invoice List view (sales_invoices_list.js) from an external app and not modify the original version.

@kevinpthorne Could you tell me where and how you will add your code?

image

I created a small JS file to be included as part of the front-end of my app. The build.json will build the compiled file…

image

…and then included here in hooks.py.

This is by far a perfect solution though. DOMSubtreeModified is called ANY time the page is changed, meaning it is called VERY often. Frappe pages are also session-persistent; the ugly if-statement helps scope exactly when the Action item should be added.

// this will help prevent duplicate calls
let added = false;

// This function is called any time the page is updated
$(document).bind('DOMSubtreeModified', function () {
    if ('List/Sales Invoice/List' in frappe.pages && frappe.pages['List/Sales Invoice/List'].page && !added) {
        added = true;
        frappe.pages['List/Sales Invoice/List'].page.add_action_item('Export to Quickbooks', function(event) {
            // Convert list of UI checks to list of IDs
            let selected = [];
            for (let check of event.view.cur_list.$checks) {
                selected.push(check.dataset.name);
            }
            // Do action
        });
        
    }
});

Unfortunately, this snippet cannot go into a Custom Script since Custom Scripts only load on Forms of a certain DocType.