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
How to change the color of a button in a child table?
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”);
}

2 Likes
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,.

19

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.