ERPNext: Color Cells in ERPNext Query Report

We can add color based on condition.

Here we have made cells in row green if Rental Payment greater than 100 else red.

add following code to query_report_name.js file

frappe.query_reports["Payments Received"] = {

"filters": [

{

"fieldname":"customer",

"label": __("Customer"),

"fieldtype": "Link",

"options": "Customer",

"width": "80"

}

],

"formatter":function (row, cell, value, columnDef, dataContext, default_formatter) {

        value = default_formatter(row, cell, value, columnDef, dataContext);

   if (columnDef.id != "Customer" && columnDef.id != "Payment Date" && dataContext["Rental Payment"] < 100) {

            value = "<span style='color:red!important;font-weight:bold'>" + value + "</span>";

   }

   if (columnDef.id != "Customer" && columnDef.id != "Payment Date" && dataContext["Rental Payment"] > 100) {

            value = "<span style='color:green!important;font-weight:bold'>" + value + "</span>";

   }

   return value;

}

}




Thanks to Jitendra for providing images and working code example.

How to add spaces in HTML or Jinjha?

Indent paragraphs with CSS is good way to add spaces in html. CSS paddings or margins give direct display instructions to the browser, so the result is more consistent.

You can easily add spaces even if you don't know css.

Sample code:

<style>p.indent{ padding-left: 1.8em }</style>
<p class="indent"> Sambhaji Kolate </p>