Ability to Color cells based on cell value

ERPNext Reports
3

Now I can format cells and row in Frappe Report.
I will update sample code here once I finish my task.

4

I would love to know how to color the cells in reports, please do post it in the forums an example for newbies like us.

Also is it possible to change the background color instead of the text color.

5

@adityaduggal
Here is my code,
You can put this code in js file of report.

Code:

"formatter":function (row, cell, value, columnDef, dataContext, default_formatter) {
                    value = default_formatter(row, cell, value, columnDef, dataContext);
            if (columnDef.id == "Debit") {
                                   if(dataContext.Debit>1){
                                    value = "<span style='color:blue;font-weight:bold'>" + value + "</span>";
                                    }
                        msgprint(dataContext.Debit)

            }


            if (dataContext.Debit) {
            }

            return value;
        }

This code will make debit blue and blod is debit is greater than Zero.
You can write any html code to format row/cells

Thanks,

Output:

color row.png1036×509 41 KB

3 Likes
6

Hi,

I would like to know if its possible to change the background color of an entire row based on cell value. I am unable to change the entire row’s background colour though the row index is known.

7

@adityaduggal can you share your report code.
Yes we can change color of entire row based on condition.

Below code will format rows if debit > 5000

"formatter":function (row, cell, value, columnDef, dataContext, default_formatter) {
    value = default_formatter(row, cell, value, columnDef, dataContext);
	if (dataContext.Debit>5000) {
		var $value = $(value).css("font-weight", "bold");
		value = $value.wrap("<p></p>").parent().html();
	}
	return value;
}
2 Likes
8

@kolate_sambhaji No PRs :confused:

9

@rmehta
Hi,
This is a standard slickgrid feature and it is coming automatically in frappe framework.
Many ERPNext developer already using it. (AFAIK @BhupeshGupta is first member to using it)

To link slickgrid formatter we need to add formatter function in query_report.js
Example

We can use following features of slickgrid by adding function in query_report.js

Thanks @BhupeshGupta

@rmehta I am also working on editable report. This will enable user to enter data from excel like view.

1 Like
10

@kolate_sambhaji nice! Wrap color in a function so that it can be easily used.

11

@rmehta we will work on adding wrapper function and making manual on how to use slick grid on Query report.

4 Likes
12

@kolate_sambhaji What if I want to change color of rows based on values in list view?

13

@Neha_Soni above code will be used for slicgrid report.
If you want to change list_view, please refer file file_list.js

https://github.com/frappe/frappe/blob/develop/frappe/core/doctype/file/file_list.js#L18

1 Like
14

@kolate_sambhaji Why file list? I have to change color of row in list view. Will that work ?

15

@Neha_Soni you can change list view by adding/changing doctype_list.js
Frappe allready done this for File doctype, you can refer this code to developer your custom list view.

1 Like
16

hi, I need to change background color of the row based on cell value. I’ve tried your code but it seems it doesn’t work.

"formatter":function (row, cell, value, columnDef, dataContext, default_formatter) {
    value = default_formatter(row, cell, value, columnDef, dataContext);
	if (dataContext.Debit>5000) {
		var $value = $(value).css("font-weight", "bold");
		value = $value.wrap("<p></p>").parent().html();
	}
	return value;
}
17

try in the if block this code it works for me:
value = "<b>" + value + "</b>";

regards

18

Hi,

I am trying to set a background color of rows in a report based on certain rules but the problem is that the color removes the field values if the fieldtype is set to none in the report.

Also the date field is removed with this see the image below:

image.png952×196 14.3 KB

The report in particular is found here

Basically the coloring is working perfectly for Link, Currency and Float type fields but its not working for fields where there is no specification of the type of field and also for DATE fields

Please let me know if there is something wrong with my code or something is wrong with backend code.

The code to give background color is as below:

"formatter":function (row, cell, value, columnDef, dataContext, default_formatter) {
	value = default_formatter(row, cell, value, columnDef, dataContext);
	if (dataContext.DN_Price == 0) {
		var $value = $(value).css("background-color", "#75ff3a");
		value = $value.wrap("<p></p>").parent().html();
	}
	return value;
}
19

Var $value = $value + $(value).css …

Regards

20

Hi,

I am using the same code but getting default_formatter not found.
Where I need to declear that variable and This.Grid is not working

21

the grid functions have changed… from slickgrid to datatable

22

any solution
?