DocType Button Color

Frappe Framework
#1

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

image

Change icon color
#2

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

#3

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

1 Like
#4

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…

#5

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

#6

Hrm. Maybe it’s a permissions issue.

image
image1033×226 25.5 KB

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

#7

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

#8

Done.

css
css750×362 120 KB

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

#9

@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.”

1 Like
#10

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).
#11

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

#12

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

#13

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

button
button895×238 12.2 KB

Can you share your script please?

#14

use this it works 100%

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

1 Like
#15

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

#16

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:

Result
Result1418×380 10.9 KB

Hope this helps.

Regards,
Sujay

#17

Thanks @Sujay,it also worked for me.:innocent:

#18

ref,.