1

One can conditionally colour particular columns and rows within a page block table.

One of the best examples of this can be seen from the Visualforce Development Cookbook or the 2nd edition here.

enter image description here

<apex:column style="color: {!IF(AND(NOT(ISNULL(campaign.ActualCost)), campaign.ActualCost<=campaign.BudgetedCost), "lawngreen", "red")}" value="{!campaign.ActualCost}"/>

However, is it possible to do conditional colouring on an enhancedList property?

<apex:enhancedList type="Your_Custom_Object__c" height="500" rowsPerPage="25" customizable="true" />

From the documentation on the possible attributes for this, it would seem that this isn't feasible? Does this mean that I would have to create another page block table section with a child page block table?

2
  • 2
    Maybe with Javascript...
    – Adrian Larson
    Jan 11, 2017 at 20:36
  • 1
    You could, alternatively, attempt to add an icon (as a formula field) to the enhancedList Jan 11, 2017 at 21:00

1 Answer 1

2

If you are really interested to do it. You can do it by Javascript (Jquery) using <apex:enahncedList/>

  • Download and add the jquery to page.
    • Include jquery on page by <apex:includeScript/>
  • Add the <apex:enhancedList/> for Campaign

Add the snippet in the last:

   <script>
        $(document).ready(function() {    
                window.setTimeout(colorIt,2000);
        });

        function colorIt()
        {
            var theDiv = $("div[class$='col-ActualCost']");
            if(theDiv) {
                theDiv.each(function() {
                    var dollor = $(this).html();
                    if(dollor != undefined && dollor != '' && dollor != null) {
                        var removeDollar = dollor.replace('$','');
                        removeDollar = removeDollar.replace(/,/g,'');
                        var num = parseFloat(removeDollar);
                        if(num > 50000) {
                            $(this).css('color','orange');
                        }
                        else if(num > 25000) {
                            $(this).css('color','crimson');
                        }
                        else if(num > 20000) {
                            $(this).css('color','green');
                        }
                        else if(num > 9000) {
                            $(this).css('color','darkgoldenrod ');
                        }
                    }
               });
            }
        }
    </script>

Numbers 50000, 10000 etc. are the currency shown in each row in column Actual Cost.

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .