How to change the color of a button in a child table?

Frappe Framework
1

I am trying to change the color of some button fields in a child table.

I can do it perfectly on a button in a doctype.

image

image
image1850×406 53.6 KB

But not on a button in a child table within the doctype.

The closest I’ve gotten is with this code, but logically it’s not what I’m looking for.

image
image1588×824 68.3 KB

image
image

2

@jls check this DocType Button Color

3

Yes, I visited that post and took part of the original code from there. However, I still don’t see how to apply it to a button field in a child table.

4

Hi @jls:

Check this.

frappe.ui.form.on('Your Doctype', {
    refresh: function(frm) {
        setButtonColor(frm)    
    },
    valores_add(frm){
        setButtonColor(frm)
    }
});

function setButtonColor(frm){
    frm.fields_dict.your_grid_field.grid.wrapper.on('click', '.grid-row', function(event) {
            $('[data-fieldname="your_fieldbutton_name"].input-sm').css("background-color", "purple");
            $('[data-fieldname="your_fieldbutton_name"].input-sm').css("color", "white");
    });
}

image
image1388×122 7.44 KB

Isn’t perfect, because seems not work depending on where you click … but vai amañando. Probably it should be managed on row rendering.

Ala.

2 Likes
5

Thank you, young one. It works, although really only in table view.

image

I will investigate to see if it can be done in the button itself in the edit view (the one that will be used from the mobile view), since the button will not be in the list view.

image

May the peace of the empanada be with you.

6

@jls

valores_on_form_rendered is your friend

frappe.ui.form.on('Your Doctype', {
    refresh: function(frm) {
        setButtonColor(frm)    
    },
    valores_add(frm){
        setButtonColor(frm)
    },
    valores_on_form_rendered(frm) {
        $('[data-fieldname="your_fieldbutton_name"].btn-default').css("background-color", "purple");
        $('[data-fieldname="your_fieldbutton_name"].btn-default').css("color", "white");
    }
});

function setButtonColor(frm){
    frm.fields_dict.your_grid_field.grid.wrapper.on('click', '.grid-row', function(event) {
            $('[data-fieldname="your_fieldbutton_name"].input-sm').css("background-color", "purple");
            $('[data-fieldname="your_fieldbutton_name"].input-sm').css("color", "white");
    });
}
2 Likes
7

Exactly. It works. I was mistakenly testing with image
Thanks, Bro