Status Colour CodingCustomize ERPNext List Views using Frappe listview_settings to add status color indicators to DocType records for intuitive visual management.
In ERPNext development, managing and visually distinguishing the status of records in List Views is crucial for quick decision-making. This snippet demonstrates how to leverage frappe.listview_settings to add colored status indicators to various DocTypes such as 'Sauda Details', 'Job Applicant', 'Customer', 'Material Request', and 'ODR Rake'. This approach enhances UX by mapping status field values to specific colors, allowing users to identify record states like 'Open', 'Closed', 'Rejected', or 'Pending' at a glance.
1 //************************** Colour Indicator List View ***************************// 2 frappe.listview_settings['Sauda Details'] = { // 'Sauda Details' is a DocType 3 add_fields: ["status"], // 'status' is a field name of type 'select' of the above DocType 4 get_indicator: function (doc) { 5 return [__(doc.status), { 6 // when 'Open' is selected, it will show the color 'Red' in ListView and likewise 7 "Open": "red", 8 "Part-Settled": "orange", 9 "Settled": "blue", 10 "Delivery": "green" 11 }[doc.status], "status,=," + doc.status]; 12 } 13 }; 14
15 frappe.listview_settings['Job Applicant'] = { 16 add_fields: ["status"], 17 get_indicator: function (doc) { 18 return [__(doc.status), { 19 "Open": "red", 20 "Replied": "purple", 21 "Scanned": "yellow", 22 "Interviewed": "blue", 23 "Shortlisted": "lightblue", 24 "Rejected": "black", 25 "Hold": "orange", 26 "Selected": "green" 27 }[doc.status], "status,=," + doc.status]; 28 } 29 }; 30
31
32 frappe.listview_settings['Customer'] = { 33 add_fields: ["customer_name", "territory", "customer_group", "customer_type", 'status'], 34 get_indicator: function(doc) { 35 color = { 36 'Open': 'red', 37 'Active': 'green', 38 'Dormant': 'darkgrey' 39 } 40 return [__(doc.status), color[doc.status], "status,=," + doc.status]; 41 } 42
43 }; 44
45
46 frappe.listview_settings['Material Request'] = { 47 add_fields: ["material_request_type", "status", "per_ordered"], 48 get_indicator: function(doc) { 49 if(doc.status=="Stopped") { 50 return [__("Stopped"), "red", "status,=,Stopped"]; 51 } else if(doc.docstatus==1 && flt(doc.per_ordered, 2) < 100) { 52 return [__("Pendingggg"), "orange", "per_ordered,<,100"]; 53 } else if(doc.docstatus==1 && flt(doc.per_ordered, 2) == 100) { 54 if (doc.material_request_type == "Purchase") { 55 return [__("Ordered"), "green", "per_ordered,=,100"]; 56 } else if (doc.material_request_type == "Material Transfer") { 57 return [__("Transfered"), "green", "per_ordered,=,100"]; 58 } else if (doc.material_request_type == "Material Issue") { 59 return [__("Issued"), "green", "per_ordered,=,100"]; 60 } 61 } 62 } 63 }; 64
65
66 // ODR Rake 67 frappe.listview_settings['ODR Rake'] = { 68 add_fields: ["status"], 69 get_indicator: function (doc) { 70 return [__(doc.status), { 71 "Pending for Loading": "orange", 72 "Forfeited": "red", 73 "Adjusted": "blue", 74 "Pending for Refund": "yellow", 75 "Refunded":"green" 76 }[doc.status], "status,=," + doc.status]; 77 } 78 };
Defines customized list view status color indicators to visually represent record states by mapping DOCType 'status' field values to colors.
Use in client scripts or custom apps when you want to visually enhance List Views by color-coding status fields for faster status recognition.
Important ideas to understand in this code
API to customize list views for DocTypes, allowing configuration of fields, filters, and indicators.
Learn moreFunction returning an array with label, color, and filter string to visually highlight list entries based on status.
Learn moreSelect field in ERPNext DocTypes representing record state which can be mapped to colors for visual feedback.
Learn moreFunction to support translation of status labels inside list view indicators, ensuring i18n compliance.
Learn moreFollow along to understand how this code works
Select the DocType you want to customize the List View for and ensure it has a 'status' select field.
frappe.listview_settings['Your DocType'] = { add_fields: ['status'] }Create a get_indicator function that returns an array containing the status label, its color, and a filter string.
get_indicator: function (doc) {
return [__(doc.status), {
'Open': 'red',
'Closed': 'green'
}[doc.status], 'status,=,' + doc.status];
}Customize the color codes for each relevant status value appropriate to your business logic.
{
'Open': 'red',
'In Process': 'orange',
'Completed': 'green'
}After saving the script or customization, verify that the List View shows the colored indicators alongside the status labels.
// Refresh list view and check colored status labelsTroubleshoot problems you might encounter