How to change the colours on Report shell

ERPNext
, , ,
1

if the preoficiency_level (star) greater than or equal to 3 star it will be green or else Orange

image
image1523×491 64 KB 


frappe.query_reports["Employee Skill Report"] = {
	"filters": [
		{
			"fieldname": "branch",
			"label": __("Select Branch"),
			"fieldtype": "Link",
			"options": "Branch"
		},
		{
			"fieldname":"project_manager",
			"label": __("Project Manager"),
			"fieldtype": "Link",
			"options":"User",
			"get_query": function () {
						return {
							query: "ss_custom_erpnext.ss_custom_erpnext.constant.constant.get_project_manager_list"
						}
			}
		},
	],
	"formatter": function (value, row, column, data, default_formatter) {
		value = default_formatter(value, row, column, data);
		let star = ['***','****','*****']
		if (column.id == "technology"){
			if(star.includes(data["proficiency_level"])){
				value = `<span style='color:green';>${data['technology']} </span>`;
			}
			else{
				value = `<span style='color:#ff8c00';>${data['technology']} </span>`;
			}
		}else if (column.id == "employee"){ 
			if (data['employee'].includes("(hide)")){
				return value = ''
			}else{
				return value = data['employee']
			}
		}else if (column.id == "employee_name"){ 
			if (data['employee_name'].includes("(hide)")){
				return value = ''
			}else{
				return value = data['employee_name']
			}
		}else if (column.id == "team_lead"){ 
			if (data['team_lead'].includes("(hide)")){
				return value = ''
			}else{
				return value = data['team_lead']
			}
		}else if (column.id == "date_of_joining"){ 
			if (data['date_of_joining'].includes("(hide)")){
				return value = ''
			}else{
				return value = data['date_of_joining']
			}
		}
        return value;
        },

};
1 Like
2

@Antony_Praveenkumar a nice trick I ve been doing . if the columns is not a LINK . I just add a html code to the data like

<span style="color:#548765"> value</span>

and voila you get any color you want . you can add also small images , icons . and they will look great.

1 Like
3

@bahaou can you please share the screen shoot of your report

4

Opera Instantané_2022-04-29_111114_business.allamaa.deom.com.sa
Opera Instantané_2022-04-29_111114_business.allamaa.deom.com.sa999×517 37.9 KB

this one has small images I added them to the country doctype .

5 Likes
5

@bahaou really nice

6

it works also with charts . see those colors are not standard . also the box when you scroll the mouse on top of the chart has little icons

Employee Summary - Opera 29_04_2022 11_13_43
Employee Summary - Opera 29_04_2022 11_13_431464×816 74.9 KB

1 Like
7

it’s really nice man, can i get the code for that report @bahaou

8

Do you have any hack to add decent size images in report?

9

We can use SVG Format Icons or Images. for handling the images is not that much easy but can share any screenshot or sample image how you want. like create a sample using the excel and share here.

10

Hi, Thankyou for replying. This is something which I am trying to achieve. I did try using html and the image was actually printing but the height of columns is fixed I believe.

image
image858×358 24.6 KB

11

inject some css through Jquery

$("your-class").css({object-fit: "contain"})
2 Likes
12

Can you give me an example or where to insert it? I am new to this thing.

13

insert in the report js file

14

def execute(filters=None):
columns = [{‘fieldname’:‘Images’,‘label’:‘Image’,‘fieldtype’:‘HTML’,‘align’:‘right’,‘width’:200,‘height’:500},
{‘fieldname’:‘employee_name’,‘label’:‘Employee name’,‘fieldtype’:‘Data’,‘align’:‘right’,‘width’:200,‘height’:500}
]

data = frappe.db.sql("""select CONCAT("<img src=",`tabEmployee`.image," height=30 width=30",">") as "Images",employee_name from tabEmployee """)
return columns, data

What should I include in js in reflection if this?

1 Like