[Help] Select Field Type Color

Frappe Framework Customization
,
1

Good day, everyone!

I have some questions regarding conditional styles in Select Field Type. Specifically, in a Child Table.

So basically, in my transaction column it is a select field type. And its options are Income and Expenses. Now I want to conditionally change the text color when either of the options are selected.

For example:

If Income is selected then the text color should be Green. And for the Expenses should be Red.

image
image1266×242 13.7 KB

I managed to do this in a report but I want to also do it in a DocType with a Child Table if that makes sense? From what I see this is possible, but I don’t really know where I should edit this in my custom app.

For more reference, this is what I want to happen in my table:

image
image1248×398 29.7 KB

Any advice on how to do this?

Thank you!

2

Hi @m0L3cuL3,

Here, I’ve applied the logic, so please check it and set it according to your scenario.

frappe.ui.form.on('Test DocType', {
    refresh: function(frm) {
        frm.fields_dict.option_color.$input.on('change', function() {
            var selectedOption = $(this).val();
            if (selectedOption === 'Column Break') {
                $(this).css('color', 'var(--yellow-600)');
            } else if (selectedOption === 'Section Break') {
                $(this).css('color', 'var(--blue-600)');
            }
        });
    }
});

Output:

2 Likes
3

Hi @NCP, thank you for your response.

I tried adding your logic, well it works on the main doctype with a select field but when I use it in my child table it does not. I assume I still need to loop through the rows?

I tried adding it in my child table javascript, here is my code:

frappe.ui.form.on("Daily Cash Flow Item", {
	refresh: function (frm) {
		frm.fields_dict.transaction.$input.on("change", function () {
			var selectedOption = $(this).val();
			if (selectedOption === "Income") {
				$(this).css("color", "var(--yellow-600)");
			} else if (selectedOption === "Expenses") {
				$(this).css("color", "var(--blue-600)");
			}
		});
	},
});

I think I’m missing something, I’m not really sure what. Does it not work with Child Tables?

4

Unsure about the child table and its functioning.

5

Oh okay, thank you! I will try to explore this and get back here once I find a solution to this.

Thank you so much @NCP