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
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
Thank you for topic! One question. Can we add several styles in one line?
ReplyDeleteI 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")
@Katerina Romanchuk
DeleteFirst 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"})
@Katerina Romanchuk
ReplyDeleteFirst 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"})
Works, thank you!
ReplyDelete@ Sambhaji Kolate,
Good luck with your blog! :) :)
Very nice!
Thanks,
Deletehttp://sbkolate.com/ is my website, I am updating it with video tutorial in next month
Oh nice!!! One more question about CSS selector. Can I in this way change style of background color for button?
ReplyDeleteLike 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.
This comment has been removed by the author.
ReplyDeleteactually i added this code:
ReplyDeletefrappe.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 ?
I am facing same problem,is it resolved for u? can you help me out?
DeleteHi ,
ReplyDeleteCan you please me out on Put a color to custom button in ERPnext Form
I have apply your code but it is not working..
ReplyDeleteThank 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
ReplyDeletehow to change the child table items quantity color,,only one cell color
ReplyDeletehi, can you help with the condition as it is not mentioned.
ReplyDelete