Friday, 5 August 2016

ERPNext Change Field Text Color and Background Color

Hello,

Today I received one email about how to change Text Color in ERP.
Frappe Framework uses jQuery, so if you know jQuery, you can add your custom css using jQuery selectors.
I am giving solution, it will helpful to Highlight fields based on condition. (e.g. Amount should be red is amount is greater than equal to 10)

In below image I have field "Amount"




Code to select Amount field in jquery

$('input[data-fieldname="amount"]')


Code to get value in amount field

$('input[data-fieldname="amount"]').val()


Code to add Text Color Red

$('input[data-fieldname="amount"]').css("color","red")


Code to add css to change background color

$('input[data-fieldname="amount"]').css("background-color","#FFE4C4")


Note: You can write above jquery code in onload function of Frappe Custom Script to execute your code before loading of Form.
Syntax:
frappe.ui.form.on("Doctype Name", "onload", function(frm,cdt,cdn) {
//your code
});



You can email me if you need any help. My email id is kolate.sambhaji@gmail.com

Thanks,
Sambhaji Kolate

2 comments:

  1. I am struggling to know how to change the background color for all the site.

    I can’t find where to use:

    $('input[data-fieldname="amount"]').css("background-color"

    ReplyDelete
  2. can we change read only fields color

    ReplyDelete