DocType Button Color

[mslake]

Is there a way to specify the color of a custom button specified in a DocType, similar to the red “Delete” button?

[tmatteson]

Uses the bootstrap classes. Jquery find the button and add/remove/change the class.

Hide ‘Add row’ from child table

Try this jQuery hack, which is for the “Delete” button in a child table. It’s the same logic as for the “Add Row” button. Or hide them both! For the “Add Row” button… hideTheButtonWrapper = $('*[data-fieldname="transfers"]'); hideTheButtonWrapper .find('.grid-add-row').hide(); … where “transfers” is the name of your child table.

[shahid]

document.querySelectorAll("[data-fieldname='button_name']")[1].style.backgroundColor ="red";

[tmatteson]

Hey @shahid, see if you can add this trick to the client scripting page in the wiki.
Actually… it looks like wiki needs a lot of attention…

[shahid]

@tmatteson Yes i’ll like to add, but how?

[tmatteson]

Hrm. Maybe it’s a permissions issue.

Do you have the option of the “Edit” button in your view?

[mslake]

Thanks. I will try that code later today and confirm.

[shahid]

Done.

Title is fine? i don’t think so, can you suggest me a better title for this?

[mslake]

@shahid Thanks for taking the time to add that to the wiki. It really helps us new developers get up to speed faster and become better contributors to the project.

I would suggest “Client side script to change CSS properties of Doctypes.”

[tmatteson]

Before you get that far though, I want to discuss a couple points of style. And maybe get an opinion from @netchampfaris Faris.

1. Frappe uses jQuery as its default method of navigating the DOM. I know that’s really passe these days but it’s the in-context method, so its a readability decision to use it or not. I like your pure javascript solution, though sometimes mixing the two (querySelector and $().find) leads to problems.
2. Frappe also uses BootStrap (or pieces of Bootstrap) so from a design perspective the “Primary”, “Danger”, “Info”, etc classes are really where the colors are stored. This becomes more important if one uses a theme or skin (which is going to start happening more, but isn’t particularly common as of today).

[mslake]

@shahid Have you confirmed this script works? I have been unsuccessful getting a form button to change color.

[tmatteson]

In the doctype company, there’s a red button that’s used to delete transaction for a company. This is the method I use.

frappe/erpnext/blob/develop/erpnext/setup/doctype/company/company.js#L135

[shahid]

@mslake yes it is confirmed, even i am also using this.

Can you share your script please?

[pratikcws]

use this it works 100%

onload_post_render: function(frm) {
frm.get_field(“button_name”).$input.addClass(“btn-primary”);
}

[Taniyavish]

Hi,
I am using this code snippet for changing background color of data field of a doctype but it is not working .

Please help me out.

Regards ,
Vishakha

[Sujay]

Hello @Taniyavish

Please use this below script. It works for me.

Custom Script:

frappe.ui.form.on(“Test”, {
refresh: function(frm) {
set_css(frm);
}
});

var set_css = function (frm) {
let el = document.querySelectorAll(“[data-fieldname=‘email’]”)[1].style.backgroundColor =“lightskyblue”;
let fl = document.querySelectorAll(“[data-fieldname=‘phone’]”)[1].style.backgroundColor =“mediumaquamarine”;
}

Result:

Hope this helps.

Regards,
Sujay

[Taniyavish]

Thanks @Sujay,it also worked for me.

[Tech_Hack_IT]

ref,.

How To change Login Button Colour in ERPNext || Frappe || TechHack Tamil

[519_Hamza_Habeeb]

HI all,
id like to change the color of the field based on the value of the field,

for example if the field value is saturday it should chnage to red

pls do help.
thanks.