How to set Listview indicators to anyfield

[iamtalib13]

Hi Frappe Community,
@jls @Zaryabqureshi @NCP
I’m working on customizing the list view for the “Store Entry” doctype in my Frappe application. I have a field named entry_type which is a select field with two possible values: “STOCK-IN” and “STOCK-OUT”.

I would like to apply indicator colors to this field in the list view based on its values. Specifically, I want the following:

• “STOCK-IN” should be displayed with a green indicator.
• “STOCK-OUT” should be displayed with a red indicator.

Here’s a simplified version of my current list view settings:

javascript

Copy code

frappe.listview_settings["Store Entry"] = {
    add_fields: [
        "entry_type", // Ensure entry_type is included in the fields
        // other fields...
    ],

    get_indicator: function (doc) {
        if (doc.entry_type === "STOCK-IN") {
            return [__("STOCK-IN"), "green", "entry_type,=,STOCK-IN"];
        } else if (doc.entry_type === "STOCK-OUT") {
            return [__("STOCK-OUT"), "red", "entry_type,=,STOCK-OUT"];
        }
        return [__(doc.entry_type || "Unknown"), "gray", "entry_type,=," + (doc.entry_type || "Unknown")];
    }
};

[Jeel]

@iamtalib13 add console.log and check its going inside this condition or not

[iamtalib13]

@Jeel
Do i need to add store_entry_list.js file path into Hooks.py

[Jeel]

@iamtalib13 no

[iamtalib13]

@Jeel
Showing in console

frappe.listview_settings["Store Entry"] = {
  add_fields: [
    "entry_type", // Ensure entry_type is included in the fields
    // other fields...
  ],

  get_indicator: function (doc) {
    console.log("Processing document:", doc);

    if (doc.entry_type === "STOCK-IN") {
      console.log("Entry Type is STOCK-IN");
      return [__("STOCK-IN"), "green", "entry_type,=,STOCK-IN"];
    } else if (doc.entry_type === "STOCK-OUT") {
      console.log("Entry Type is STOCK-OUT");
      return [__("STOCK-OUT"), "red", "entry_type,=,STOCK-OUT"];
    }

    console.log("Entry Type is Unknown or not handled");
    return [
      __(doc.entry_type || "Unknown"),
      "gray",
      "entry_type,=," + (doc.entry_type || "Unknown"),
    ];
  },
};

[NCP]

Hi @iamtalib13,

Indicators are not set in two fields at the same time. If the indicator is set for status, none of the other fields will be set. For that you have to apply custom logic, here I have given you reference, you have to overwrite the stock entry list code first.

I have done the logic for stock entry purpose, so you set the logic according to you!

function extend_listview_event(doctype, event, callback) {
    if (!frappe.listview_settings[doctype]) {
        frappe.listview_settings[doctype] = {};
    }

    const old_event = frappe.listview_settings[doctype][event];
    frappe.listview_settings[doctype][event] = function (listview) {
        if (old_event) {
            old_event(listview);
        }
        callback(listview);
    };
}

extend_listview_event("Stock Entry", "refresh", function (listview) {
    $(document).ready(function() {
        $('span[data-filter="purpose,=,Material Receipt"]').each(function() {
            $(this).removeClass('gray').addClass('green');
        });

        $('span[data-filter="purpose,=,Material Issue"]').each(function() {
            $(this).removeClass('gray').addClass('red');
        });
        
        $('span[data-filter="purpose,=,Material Transfer"]').each(function() {
            $(this).removeClass('gray').addClass('yellow');
        });
    });
});

Output:

[iamtalib13]

@NCP @Jeel
Thank you for your support. It has been very helpful.