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
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.