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:
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:
custom/modules/Accounts/clients/base/views/recordlist
Thanks
I used it in version 7. I haven’t used version 6 so I don’t know :)..
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 7.6.1.0
Regards
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?
Cheers
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
Lennart
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 7.9.0.1 – 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
lennart