Script Report: Hintergrundfarbe von Zeilen setzen (V15)

Community German Community
1

Ich habe unter V14 eine Lösung entwickelt, wie man in Script Reports die Hintergrundfarbe von Zeilen individuell setzen kann. Leider funktioniert das unter V15 nicht mehr. Als Beispiel soll dieser Script Report dienen:
image

Zeile 1 soll mit roter Hintergrundfarbe, Zeile 2 mit gelber Hintergrundfarbe und Zeile 3 mit grüner Hintergrundfarbe dargestellt werden.

Python-Code des Reports:

def execute(filters=None):
	columns, data = ["Color:Data"], [["red"],["yellow"],["green"],]
	return columns, data

Javascript-Code des Reports:

frappe.query_reports["Background Colors"] = {
	"filters": [

	],
	after_datatable_render(table_instance) {
		// I used to set the backgroundColor from this event
		table_instance.datamanager.data.forEach((row, rowIdx) => {
			console.log(`Row #${rowIdx} should be ${row.color}`);
		});
	},
};

Wie würdet Ihr das lösen?

Für das allgemeine Interesse: diese Lösung funktioniert unter V14, nicht aber unter V15:

frappe.query_reports["Background Colors"] = {
	"filters": [

	],
	after_datatable_render(table_instance) {
		// I used to set the backgroundColor from this event
		table_instance.datamanager.data.forEach((row, rowIdx) => {
			einzelne_zeile_färben(table_instance, rowIdx, row.color);
		});
	},
};

function einzelne_zeile_färben(table_instance, rowIdx, color) {
	for(let col = 0; col < Object.entries(table_instance.datamanager.data[rowIdx]).length + 1; col++) {
		table_instance.style.setStyle(`.dt-cell--${col}-${rowIdx}`, {backgroundColor: color});
	}
}
2

Gelöst. In frappe_datatable.scss wird die Klasse dt-cell definiert:

	.dt-cell {
		color: var(--text-color) !important;
		background-color: var(--bg-color) !important;
	}

Da hier die background-color als !important definiert wird, werden style-Änderungen für dieses Attribut ignoriert. Zum Glück braucht der Code nur eine kleine Änderung: die neue Farbe muss ebenfalls !important sein.

function einzelne_zeile_färben(table_instance, rowIdx, color) {
	for(let col = 0; col < Object.entries(table_instance.datamanager.data[rowIdx]).length + 1; col++) {
		console.log(`Suche: .dt-cell--${col}-${rowIdx}`)
		table_instance.style.setStyle(`.dt-cell--${col}-${rowIdx}`, {backgroundColor: `${color} !important`}); // Neue Farbe ist ebenfalls !important
	}
}