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

9 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
  7. Hi ,

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

    ReplyDelete