Total field custom script

Frappe Framework Custom Script
1

Hi,
I’ve coded child table for total calculating percentage of all rows.
i want to changing its color to RED if it gets greater than 100.
please anybody can help me up?
below is my code and SS.

frappe.ui.form.on(“Partnership”, “partnership_percent”, function(frm, cdt, cdn) {

var calculate = frm.doc.partnership_information;
var total = 0
for(var i in calculate) {
total = total + calculate[i].partnership_percent
}

frm.set_value("total_percentages",total)
if(frm.doc.total_percentages >100)
{
	frappe.msgprint("Total Percentage Cannot be Greater Than 100%")
}

});

Capture copy
Capture copy958×502 122 KB

2

Help??

3

You could catch the html element of the field with javacript/jquery and add the css style properity “background-color: red” to it…

4

Thanks for your reply @joelios
I’ve tried below code but didn’t work.
Please tell me where i am wrong.

if(frm.doc.total_percentages >100)
{
frappe.msgprint(“Total Percentage Cannot be Greater Than 100%”)
frm.set_value(“total_percentages”, <span style=“color:red” + frm.doc.total_percentages + );
}

5
  • );
6

That could maybe work with an html field, but not with a data…

In your customscript, you have to select the corresponding html element like “var field = documemt.getElementById(“id of field”);”
Afterward you could add the css properity to iz with for e.g. “field.style.background-color = “red”;”

7

You are talking about to get element by id? from where can i get its id?
I tried get element by name but didn’t work.

if(frm.doc.total_percentages >100)
{
frappe.msgprint(“Total Percentage Cannot be Greater Than 100%”)
document.getElementsByName(“total_percentages”).style.background-color = “red”;
}

8

with getElemetsByName you will get a list of all html element with the searched class name, this can not work…

Unfortunalty i’m not at home, as soon as im at home i will send you a customscript that will work…

9

Thank you so much @joelios
i am waiting.

10

hi @shahid sorry for my late feedback.

try this script, it should work:

if (frm.doc.total_percentages >100) {
 frappe.msgprint(“Total Percentage Cannot be Greater Than 100%”);
 document.querySelectorAll("[data-fieldname='total_percentages']")[1].style.backgroundColor="red"; 
}

please let me know if its worked.

cheers

11

@joelios it is not working. :confused:

12

Sorry i had an typo in it, ‘total_percentages’ instead of ‘total_percentage’… :wink:

Please replace the wrong fieldname with the correct one and it will work :wink:

13

@joelios it is total_percentages.

Capture
Capture1172×39 1.31 KB

14

Hm strange, it works on my testsystem :thinking:

Can you show me your browser consol errors?

15

Sorry? console errors?
where it is i don’t know.

16

Press F12 in your browser and select console, there you’ll find all javascript based errors

17

jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js:4
libs.min.js?ver=1516030925.0:7295 WebSocket connection to ‘ws://www.erp.com/socket.io/?EIO=3&transport=websocket&sid=57cN3VPNx2F0IeCAACyG’ failed: Error during WebSocket handshake: Invalid status line
n.doOpen @ libs.min.js?ver=1516030925.0:7295

18

Ok, there is no error based on this script.

Does the frappe.msgprint message shows up?

19

Yes it is showing. and all code is working fine.

20

should we have to use !important property ??