How to add color in Dr Cr in Chart of accounts tree

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!

1 Like

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