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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
({ 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(); }, 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:
|
1 |
div[data-original-title="Inactive"] |
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:
|
1 2 |
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:
7 comments for “How to add a record color to a listview in SugarCRM”