+ Start a Discussion
megmooPDXmegmooPDX 

conditional highlighting on VisualForce page

I have a VisualForce page displaying some fields. When these fields have any value other than "none" selected, the users would like to see the field highlighted in some manner. 

Here's what the screen currently looks like:
User-added image

Here's an example of what I'd like (exactly where the highlighting takes place, whether it's shading or changing font color of whatever is flexible) it to look like:
User-added image

My VF page code is as follows (note: the page has more elements displayed below the screen shot, but those aren't relevant to the question, so I cut them off to save space on the screen shot):

<apex:page standardController="ACA_Member__c" extensions="reloadACAMember,risk_ControllerExtension">

<style>
   .col1 {width:200px; text-align:right; font-size:.875em; font-weight:bold; color:rgb(74,74,86);}
   .col2 {width:200px; text-align:left;}
   .colp1 {width:100px; text-align:right; font-size:.875em; font-weight:bold; color:rgb(74,74,86);}
   .colp2 {width:100px; text-align:left;}
   .colp3 {width:100px; text-align:left;}
   .colh1 {width:400px; height:25px; text-align:center; background-color:#A9D0F5;}
</style>
   
   
<apex:form >
    <apex:pageBlock mode="edit">
       
        <apex:pageblockButtons >
            <apex:commandButton value="Save" action="{!save}" reRender="updateable, relatedList"/>
        </apex:pageblockButtons>

        <apex:panelGrid columns="2" columnClasses="col1,col2" border="0">
           
            <apex:outputText >Lifestyle Segment</apex:outputText>
            <apex:inputField value="{!ACA_Member__c.Lifestyle_Segment__c}"/>
          
           
            <apex:outputText >Favorable to ?</apex:outputText>
            <apex:inputField value="{!ACA_Member__c.Favorability__c}"/>
           
            <apex:outputText >Engaged in Health Decisions?</apex:outputText>
            <apex:inputField value="{!ACA_Member__c.Health_Decisions__c}"/>
           
            <apex:outputText >Prefers Details or Highlights?</apex:outputText>
            <apex:inputField value="{!ACA_Member__c.Details_Highlights__c}"/>
           
        </apex:panelGrid>
       
        <apex:panelGrid columns="1" columnClasses="colh1" border="0">
            <apex:outputLabel ><b>Provider Information</b></apex:outputLabel> 
        </apex:panelGrid>
       
        <apex:panelGrid columns="3" columnClasses="colp1,colp2,colp3" border="0">
     
            <apex:outputLabel ></apex:outputLabel>  
            <apex:outputLabel ><b>Confirmed</b></apex:outputLabel>
            <apex:outputLabel ><b>Attributed</b></apex:outputLabel>
           
            <apex:outputLabel >Name</apex:outputLabel>
            <apex:inputField value="{!ACA_Member__c.Confirmed_Provider__c}"/>
            <apex:outputField value="{!riskProfile.Attributed_Provider__c}"/>

            <apex:outputLabel >NPI</apex:outputLabel>
            <apex:inputField value="{!ACA_Member__c.Confirmed_NPI__c}"/>
            <apex:outputField value="{!riskProfile.Attributed_NPI__c}"/>
           
        </apex:panelGrid>
         
    <apex:panelGrid columns="2" columnClasses="col1,col2" border="0">
        <apex:outputLabel ></apex:outputLabel>
        <apex:outputLabel ></apex:outputLabel> 
   
            <apex:outputText ><b>Rep Determined Do Not Engage</b></apex:outputText>
            <apex:inputField value="{!ACA_Member__c.DNE__c}"/>
       
    </apex:panelGrid>

       
    </apex:pageBlock>

</apex:form>

</apex:page>

********************************************

One thought I had is that I could use the rendered attribute to display it one way if the value is not null, but another way if it is null. However, when I test this, I cannot the ISBLANK function to return either TRUE or FALSE. Even if this works, it seems like a really clunky, less than ideal solution. But I'm new to this (certified admin, but no developer training), so I'm just trying to figure something out. 

<apex:outputText rendered="ISBLANK({!ACA_Member__c.Lifestyle_Segment__c})>Lifestyle Segment</apex:outputText>
<apex:inputField value="{!ACA_Member__c.Lifestyle_Segment__c}"/>


Anyone have ideas as to how I can accomplish what I need to? Thanks in advance. 
Best Answer chosen by megmooPDX
Sure@DreamSure@Dream
try some thing like this:
<apex:pageblock >
        <apex:pageblocksection id="theSection">
    <apex:outputText style="background-color:{!IF(sel=='No','blue','white')}" value="Label Text"/>
    <apex:selectList value="{!sel}" multiselect="false" size="1">
    <apex:actionsupport event="onchange" rerender="theSection"/>
    <apex:selectOption itemLabel="No" itemValue="No"></apex:selectOption>
    <apex:selectOption itemLabel="Yes" itemValue="Yes"></apex:selectOption>  
    </apex:selectList>
        </apex:pageblocksection>
        </apex:pageblock>

All Answers

Sure@DreamSure@Dream
try some thing like this:
<apex:pageblock >
        <apex:pageblocksection id="theSection">
    <apex:outputText style="background-color:{!IF(sel=='No','blue','white')}" value="Label Text"/>
    <apex:selectList value="{!sel}" multiselect="false" size="1">
    <apex:actionsupport event="onchange" rerender="theSection"/>
    <apex:selectOption itemLabel="No" itemValue="No"></apex:selectOption>
    <apex:selectOption itemLabel="Yes" itemValue="Yes"></apex:selectOption>  
    </apex:selectList>
        </apex:pageblocksection>
        </apex:pageblock>
This was selected as the best answer
megmooPDXmegmooPDX
Perfect! Thanks!!

I made a few adjustments, but your concept is exactly what I needed. I'll post below my changes in case this helps anyone else. 

           <apex:outputText style="background-color:{!IF(ISBLANK(ACA_Member__c.Lifestyle_Segment__c),'','yellow')}" value="Lifestyle Segment"/>
            <apex:inputField value="{!ACA_Member__c.Lifestyle_Segment__c}"/>
          
            <apex:outputText style="background-color:{!IF(ISBLANK(ACA_Member__c.Favorability__c),'','yellow')}" value="Favorable?"/>
            <apex:inputField value="{!ACA_Member__c.Favorability__c}"/>
           
            <apex:outputText style="background-color:{!IF(ISBLANK(ACA_Member__c.Health_Decisions__c),'','yellow')}" value="Engaged in Health Decisions?"/>
            <apex:inputField value="{!ACA_Member__c.Health_Decisions__c}"/>
           
            <apex:outputText style="background-color:{!IF(ISBLANK(ACA_Member__c.Details_Highlights__c),'','yellow')}" value="Prefers Details or Highlights?"/>
            <apex:inputField value="{!ACA_Member__c.Details_Highlights__c}"/>
Suma GangaSuma Ganga
Hi,


i have a same problem with the bg color on conditional bases..
here, i am using <apex:datatable> and my list is listfrmController.
And my condition is :: every time ill get 7 values from the list, for the first 6 values color will be blue and the last one color will be Green.
here is my code....
i am getting green for all the list items with my code...

can any one solve this...

<apex:pageBlockSection title="status" collapsible="false" showHeader="true">
                 <apex:dataTable align="center" border="1" value="{!listfrmController}" var="CO">
                 <apex:column >
                         <apex:facet name="header">Milestone</apex:facet>
                    <apex:outputText value="{!CO.Milestone__c}" style="color:{!IF(listfrmController.size<6,'blue','green')}"/>
                 </apex:column>
               
                 <apex:column >
                    <apex:facet name="header">Complete</apex:facet>
                    <apex:outputText value="{!CO.Complete__c}"/>
                 </apex:column>
                
               </apex:dataTable>        
                     
            </apex:pageBlockSection>
       
Ajay K DubediAjay K Dubedi
Hi Suma Ganga,
Please Try this :
style="color:{!IF(listfrmController.size()<7,'blue','green')}"


Hope this helps
Thanks