List view row color

Frappe Framework Customization
,
1

In List view, change whole row color like as odd and even.

2

@mohsininspire I don’t think that you can change the row color unless you create a plugin that extend the ListView js file. But instead you can change the indicator color and you can count for odd and even rows.

var _count = 1;
function _isOdd(n) { return n > 0 && (n % 2) == 1; }
frappe.listview_settings['Doctype Name'] = {
    get_indicator(doc) {
        // customize indicator color
        if (_isOdd(_count++)) {
            return [__("Odd"), "red", "odd,=,Yes"];
        } else {
            return [__("Even"), "green", "odd,=,No"];
        }
    },
};
2 Likes
3

please guide me more

4

any luck??

5

Just include a small CSS snippet… Can be done through a custom app or a Client Script.

6

can you guide me more about custom app

7

See these docs about how to inject CSS via custom app:

https://frappeframework.com/docs/user/en/python-api/hooks#javascript-css-assets

8

image
image1140×560 75 KB

i want to do like this can you help me how i can do this

9

Hello @ibashirbwn ,Try this

frappe.listview_settings[‘Doctype_Name’] = {
refresh: function (listview) {
$(“.list-row-container”).each(function(i,onj){
if (i%2===0){
$(this).css(‘background-color’, ‘cyan’);
}
})

10
  • Create New Client Script
  • Select the Doctype e.g Delivery Note
  • Change the field value ‘Apply To’ from default Form to List

Script code:

frappe.listview_settings['Delivery Note'] = {
    refresh: function (listview) {
        $(".list-row-container .list-row").each(function (i, obj) {
            if (i % 2 === 0) {
                $(this).css('background-color', '#e0e0e0'); 
            } else {
                $(this).css('background-color', '#f9f9f9'); 
            }
        });
    }
};
3 Likes