Change filed background color

Frappe Framework
1

Hello,

I want to change some visibility of created fields. I want to change background color of mandatory fields only. Is it possible only using css or I need JS also. As mandatory fields depends on reqd fields selection. If its possible, then please suggest me how to do this.

Thanks

2

Hi @Cross_X,

Please check the code.

It’s a example

frappe.ui.form.on('Item', {
    refresh : function(frm){
        document.querySelectorAll("[data-fieldname='item_code']")[1].style.backgroundColor = 'red';
        document.querySelectorAll("[data-fieldname='item_code']")[1].style.color = 'white';
        document.querySelectorAll("[data-fieldname='item_code']")[1].style.fontWeight = 'bold';
    }
});

Output:

image
image1291×424 35.9 KB

I hope this helps.

Thank You!

4 Likes
3

@NCP wow. Thank you so much for your reply.

But it’s workings only Item doctype. Is there any way to declare it globally? So that It will effect every doctypes mandatory fields.

4

Hmm @Cross_X,

I think lots of customization is needed for it.

5

@NCP yea… that’s true I guess. Your given code example is good but it’s not dynamic. It’ll always make item_code field red, even if I remove mandatory tick from this field option.

6

@NCP can we use this for a table and apply a condition for example change color only if the value of the field is a certain value?

7

@519_Hamza_Habeeb Yes. You can change color by using JS

8

can you give an example?

9

@Cross_X

10

@519_Hamza_Habeeb If you want to change Child Table Doctype’s field’s BG color, that’s will be easy. But child tables cell BG color change will be very critical and long process I guess.

11

@Cross_X yes i wanted to change it according to the value of the field

12

@NCP

Thank you for posting this. I was surprised at how long it took to find a working syntax.

Cheers!

Unfortunately we cant change the properties of read-only fields and it seems link fields or at least the customer field in Sales Invoice is not influenced by this script :frowning: