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

12 comments:

  1. Thank you for topic! One question. Can we add several styles in one line?

    I investigate but can't understand how to do this. Have syntax error.

    Something like this:

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

    ReplyDelete
    Replies
    1. @Katerina Romanchuk

      First of all thanks for feedback, it inspires me to write blog.

      Following code will add multiple css.

      $('input[data-fieldname="amount"]').css({"background-color": "yellow", "font-size": "18px", "color":"green"})

      Delete
  2. @Katerina Romanchuk

    First of all thanks for feedback, it inspires me to write blog.

    Following code will add multiple css.

    $('input[data-fieldname="amount"]').css({"background-color": "yellow", "font-size": "18px", "color":"green"})

    ReplyDelete
  3. Works, thank you!
    @ Sambhaji Kolate,
    Good luck with your blog! :) :)

    Very nice!

    ReplyDelete
    Replies
    1. Thanks,
      http://sbkolate.com/ is my website, I am updating it with video tutorial in next month

      Delete
  4. Oh nice!!! One more question about CSS selector. Can I in this way change style of background color for button?

    Like this:
    $("[data-fieldname='cancel_shipment']", frm.body).css({'background-color': '#ff5858', 'border': '1px solid blue'})

    I see that I change all block. Result:
    http://radikal.ru/lfp/s019.radikal.ru/i605/1611/c4/251c8258497d.jpg/htm

    I expected to see red button only.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. actually i added this code:

    frappe.ui.form.on("Quotation", "onload", function(frm,cdt,cdn) {
    $('input[data-fieldname="total_gm"]').css("color","red")

    });

    in custom print CSS filed
    but it didnt work
    am i missuing any thing ?

    ReplyDelete
    Replies
    1. I am facing same problem,is it resolved for u? can you help me out?

      Delete
  7. Hi ,

    Can you please me out on Put a color to custom button in ERPnext Form

    ReplyDelete
  8. I have apply your code but it is not working..

    ReplyDelete
  9. Thank you so much for the articles. Please post an article on how to customize POS desk page and how to display dynamic data in desk pages from database like displaying doctype data in a table

    ReplyDelete