Frappe FrontendJavascript

How to Implement Status Colour Coding in ERPNext List Views for Better Visual Status Tracking?

Status Colour Coding

Customize ERPNext List Views using Frappe listview_settings to add status color indicators to DocType records for intuitive visual management.

Introduction

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.

frappe/listview_settings/status_colour_coding.jsjavascript
1//************************** Colour Indicator List View ***************************//
2frappe.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
15frappe.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
32frappe.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
67frappe.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};

Understanding This Code

What It Does

Defines customized list view status color indicators to visually represent record states by mapping DOCType 'status' field values to colors.

When To Use

Use in client scripts or custom apps when you want to visually enhance List Views by color-coding status fields for faster status recognition.

Prerequisites

  • Basic knowledge of Frappe Framework and ERPNext DocTypes
  • Understanding of frappe.listview_settings API
  • Access to add client-side custom scripts or app customizations

Key Concepts

Important ideas to understand in this code

frappe.listview_settings

API to customize list views for DocTypes, allowing configuration of fields, filters, and indicators.

Learn more

get_indicator method

Function returning an array with label, color, and filter string to visually highlight list entries based on status.

Learn more

DocType status field

Select field in ERPNext DocTypes representing record state which can be mapped to colors for visual feedback.

Learn more

Localization with __()

Function to support translation of status labels inside list view indicators, ensuring i18n compliance.

Learn more

Step-by-Step Tutorial

Follow along to understand how this code works

1

Identify the DocType and status field

Select the DocType you want to customize the List View for and ensure it has a 'status' select field.

javascript
frappe.listview_settings['Your DocType'] = { add_fields: ['status'] }
Next Step
2

Define the get_indicator function

Create a get_indicator function that returns an array containing the status label, its color, and a filter string.

javascript
get_indicator: function (doc) {
  return [__(doc.status), {
    'Open': 'red',
    'Closed': 'green'
  }[doc.status], 'status,=,' + doc.status];
}
Next Step
3

Map statuses to colors

Customize the color codes for each relevant status value appropriate to your business logic.

javascript
{
  'Open': 'red',
  'In Process': 'orange',
  'Completed': 'green'
}
Next Step
4

Deploy and verify in ERPNext

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 labels

Common Issues & Solutions

Troubleshoot problems you might encounter