How to add a record color to a listview in SugarCRM


Hi! In this post I will show you how to add a color to a listview in SugarCRM.

In this example, we will give all the records a red color if a field contains the value ‘Inactive’ in the Accounts module. To do so, create the following breadcrumb: custom/modules/Accounts/clients/base/views/recordlist/recordlist.js.

In the recordlist.js, add the code below:

    extendsFrom: 'RecordlistView',
    initialize: function (options) {
        app.view.invokeParent(this, {type: 'view', name: 'recordlist', method: 'initialize', args: [options]});
        this.collection.on('data:sync:complete', function () {
        }, this);
    renderColors: function () {
        _.each(this.fields, function (field) {
            if(field.$el.find('div[data-original-title="Inactive"]').length > 0){
                field.$el.parents('tr').css("background-color", "#FFBABA");
                field.$el.parents('tr').children('td').css("background-color", "transparent");

What we do is, we search for a cell with the value ‘Inactive’. This is done by this code:


When we found that cell, we need to color this record. We need to take the tr parent and give this a certain color and delete the color of the ‘td’-elements. This is done by the following code:

field.$el.parents('tr').css("background-color", "#FFBABA");
field.$el.parents('tr').children('td').css("background-color", "transparent");

Now, perform a repair & rebuild and enjoy the result:



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Hi,

    I was interested in your idea but can I ask is this suitable for V6.5.x of SugarCRM or is it only possible with later versions? I ask because I can see no such path as this:



      • Hi Laurent,

        I need to change background color of dropdown value

        For example I have dropdown “Countries” having more than 100 countries. I need to change background color of 2 countries “United States” and “Canada” only.

        I tried to do from this article (Extending the base Record view in Sugar 7 ยท GitHub) but not working

        Any help will be highly appreciable

        SugarCRM Professional


  • Hi,

    Thanks for your article!
    Is there anyway to color the row based on a field which is not a column of the record list view?


  • Hi,

    just found your solution.
    It’s exactly what i need.

    but i have a problem – first of all the folder ‘clients’base’views’recordlist’ in custom’modules’Account doesn’t exist.
    so i create on and put the file ‘recordlist.js’ with the code you mentioned and the value “Pending” in the folder.

    i do quickrepair -> i can load the module but there is nothing to see, not even the list oder records.

    where is my error?
    Do i need to change something in the code?
    the folderpath is wrong? (custom’modules’Accounts’clients’base’views’recordlist)

    Thanks in advance

  • Hi,

    just found your post and it’s exactly what i was looking for.
    sadly it isn’t working. maybe i do a mistake.

    i use sugar version – professional

    first of all – the described folder doesn’t exist.
    so i created one with the path custom/modules/Accounts/clients/base/views/recordlist

    then created the .js file with the code you mentioned and changed the “Inactive” to a status i use.

    then i putted the file inside the folder and did a quickrepair.

    but after that i was able to open the module, but nothing was inside, not even the records.

    where is the mistake?
    wrong folder? path wrong?
    maybe some code wrong?

    thanks und regards

  • Hi, I able to a field status in List depending on status option value. Issue is while trying to add/remove new columns in the list , colour code disappears. Only refresh the page brings the colour code back. Can you please suggest. Im using Sugar 9.0.

Tag Cloud