Custom Script to Color specific items in list view

[pronext]

Is there any possibility to color specific items in ERPnext list view via client script for lists?

Just like I can add a button to a specific list view item.

Any help would be really nice.
Thank you and have a great day.

[avc]

Hi @pronext:

Try this on a client script (List)

frappe.listview_settings['YourDoctype'] = {
    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'); 
            }
        });
    },
    formatters: {
        yourfield (val) {
            return "<span style='color:blue;font-weight:bold'>" + val + "</span>";
        },
    },
    button: {
        show(doc) {
            return doc.name;
        },
        get_label() {
            return 'View';
        },
        get_description(doc) {
            return __('Hello');
        },
        action(doc) {
            console.log('Your action');
        }
    },
};

This script contains 3 customization samples for manipulating background color for odd rows, changing data color with formatters and adding button on each row.

Check this doc:
https://frappeframework.com/docs/user/en/api/list#standard-list-js

Hope this helps.

[NCP]

You have to play with the Listview client script and can do magic too

frappe.listview_settings['Item'] = {
    refresh: function(listview) {
        $('.list-row').each(function () {
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200)
            + ','
            + (Math.floor((256-199)*Math.random()) + 200)
            + ','
            + (Math.floor((256-199)*Math.random()) + 200)
            + ')';
            $(this).css("background-color", hue);
        });
    }
};

Output:

[pronext]

very nice. Thank you!