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 '17 at 20:36
  • 1
    You could, alternatively, attempt to add an icon (as a formula field) to the enhancedList – Sebastian Kessel Jan 11 '17 at 21:00
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.