Hi,
i want customize my chart of account. i want to make it if the balance is “Dr” the font color is blue, but if the balance is “Cr” font color is red. is anyone can help me with this?
Thankyou so much
1 Like
That for, you have to update the tree structure code, otherwise you have to override the code in your custom app.
You have to update the below code and apply the provided code.
frappe.db.get_single_value("Accounts Settings", "show_balance_in_coa").then((value) => {
if (value) {
const get_balances = frappe.call({
method: "erpnext.accounts.utils.get_account_balances",
args: {
accounts: accounts,
company: cur_tree.args.company,
},
});
get_balances.then((r) => {
if (!r.message || r.message.length == 0) return;
for (let account of r.message) {
const node = cur_tree.nodes && cur_tree.nodes[account.value];
if (!node || node.is_root) continue;
// show Dr if positive since balance is calculated as debit - credit else show Cr
const balance = account.balance_in_account_currency || account.balance;
const dr_or_cr = balance > 0 ? "Dr" : "Cr";
const format = (value, currency) => format_currency(Math.abs(value), currency);
const color = dr_or_cr === "Dr" ? "blue" : "red";
if (account.balance !== undefined) {
node.parent && node.parent.find(".balance-area").remove();
$(
'<span class="balance-area pull-right" style="color: ' + color + '!important;">' +
(account.balance_in_account_currency
? format(
account.balance_in_account_currency,
account.account_currency
) + " / "
: "") +
format(account.balance, account.company_currency) +
" " +
dr_or_cr +
"</span>"
).insertBefore(node.$ul);
}
}
});
}
});
Only 1 line add in the code
const color = dr_or_cr === "Dr" ? "blue" : "red";
and update the other line:
'<span class="balance-area pull-right" style="color: ' + color + '!important;">' +
Output:
I hope this helps!
2 Likes
so, i only need to override account_tree.js?
If you want to add it to the core, it’s possible, but we do not recommend modifying the core code. Instead, we suggest overriding the JS code in your custom app.
How to add in custom app?
go to the hooks.py, add it
doctype_tree_js = {"Account" : "public/js/account_tree.js"}
Copy the whole code and modify it that I provided in the above post.
in my erpnext account_tree only show this code below. kind of different with your code? can u help me to adjust the code?
on_get_node: function(nodes, deep=false) {
if (frappe.boot.user.can_read.indexOf(“GL Entry”) == -1) return;
let accounts = [];
if (deep) {
// in case of `get_all_nodes`
accounts = nodes.reduce((acc, node) => [...acc, ...node.data], []);
} else {
accounts = nodes;
}
const get_balances = frappe.call({
method: 'erpnext.accounts.utils.get_account_balances',
args: {
accounts: accounts,
company: cur_tree.args.company
},
});
get_balances.then(r => {
if (!r.message || r.message.length == 0) return;
for (let account of r.message) {
const node = cur_tree.nodes && cur_tree.nodes[account.value];
if (!node || node.is_root) continue;
// show Dr if positive since balance is calculated as debit - credit else show Cr
const balance = account.balance_in_account_currency || account.balance;
const dr_or_cr = balance > 0 ? "Dr": "Cr";
const format = (value, currency) => format_currency(Math.abs(value), currency);
if (account.balance!==undefined) {
$('<span class="balance-area pull-right">'
+ (account.balance_in_account_currency ?
(format(account.balance_in_account_currency, account.account_currency) + " / ") : "")
+ format(account.balance, account.company_currency)
+ " " + dr_or_cr
+ '</span>').insertBefore(node.$ul);
}
}
});
},
Please read my first post again.
i’m sorry, it works. thankyou so much