How to field color depending on fiele value

💬 General Discussion
1

How could I have field color change depending on field value?

e.g. if currency field value < $5000 => show field value in red, otherwise standard color.

Thanks!

2

You should try process record logic hook.

2 Likes
3

Taking reference from http://stackoverflow.com/questions/37835511/parse-and-compare-currency-values
The below code will change the color of amount_usdollar field in ListView depending on whether the amount is greater or less than 20000.
Regular Expression is used to convert formatted currency to integers for easy comparison.

For DetailView you do not need the “.each()” function, instead just use the field ID as the selector.



$('.list td[field="amount_usdollar"]').each(function(){
			
			var amount = parseFloat($(this).text().replace(/[^0-9\.]+/g,""));
			if(amount<20000){
				$(this).css({'background-color':'#79be37'} );
			}
			
			
		});
1 Like
4

There is a funny thread of me talking to myself here:

https://suitecrm.com/forum/developer-help/8244-conditional-formatting-in-lists

it contains a couple of different techniques, and a link to a very nice article by Jim Mackin on this issue.

2 Likes
5

Wow. thanks y’all. I will have a look shortly!

6

@Arsalan

How / where would I implement your JavaScript code?

7

OK, so if I understand correctly process_record only works for list-view and subpanels. I however want this primarily on DetailView.

Therefore I’m experimenting with after_retrieve. My logic hook is sucessfully triggered in Detailview. However I’m not getting the result i want.

Here’s my current one-liner for testing::

$bean->deckungsbeitrag_c = “

” . $bean->deckungsbeitrag_c . “
”;

This results in this html code:

0.00

i.e. this field value is shown as 0.00.

It looks like I may not be able to insert html-code into a currency typ field (makes sense, right?). => I need a different approach. Any ideas?

As a workaround I will add a Text-type Field for now, hide the currency field and show only the text-field. That’ll work for the time being, but of course this could just as well be done in a before_save logic hook (right?), and kind of defeats the purpose. But for now it’ll work.

8

Well, I feel like a simple Javascript code can do the trick. Not sure what perks process records have.
Anyways to answer your last question, for DetailView your code would be like


var amt = parseFloat($('#deckungsbeitrag_c').text().replace(/[^0-9\.]+/g,""));
if(amt<20000){
	$('#deckungsbeitrag_c').css({'background-color':'#79be37'} );
}

How to inculde this code on Opportunities DetailView is shown over here
https://developer.sugarcrm.com/2013/09/06/adding-javascript-files-to-edit-and-detail-views/

On a side note, I am not sure how this work in case of currency conversions since we are passing a literal value ‘20000’.

1 Like
9

Wow, Arsalan. Easy as pie and works like a charm. Thanks alot.

So SuiteCRM has JQuery built-in? I didn’t know that.