+ Start a Discussion
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

Conditionally render Style based on List size.

Hi there,

I have a flashing .glow style. I am trying to add criteria which will make it only render when the list sizes in question are greater than 5. I have tried long and hard to find a solution to this on the internet. I was wondering if this was even possible?

I am trying to make it so that if the list, for example AccountsEnquiry was greater than 5 it would trigger the .glow style, if not then it would remain normal.

Thank you in advance for anyone that can point me in the right direction.

This is my visualforce page:

<apex:page sidebar="False" docType="html-5.0" controller="VSDashBoard2" tabStyle="account" >  
<!--


-->


    
    <script>
    $j = jQuery.noConflict();
 var newWin=null;
 function openLookupPopup(AccountID)
 {
  var url="/apex/DestinyAccount?id=" + AccountID;
    $jnewWin=window.open(url);
  if (window.focus)
  {
     $jnewWin.focus();
  }
    
     return false;
    }
      
</script>

<style>  
     .glow{  
        animation: flashBg 0.9s;  
        -webkit-animation: flashBg 0.9s alternate infinite;  
     }  
     @keyframes flashBg  
     {  
       from {  
           border: 3px solid #ff6161;  
          }  
       to {  
           border: 3px solid #ffd324;  
         }  
     }  
     @-webkit-keyframes flashBg /* Safari and Chrome */  
     {  
       from {  
           border: 3px solid #ff6161;  
          }  
       to {  
           border: 3px solid #ffd324;  
           box-shadow: 0px 0px 50px 3px #e14f1c;  
         }  
     }  
   </style>  
   <style>
.activeTab {background-color: #892034; color:White;
background-image:none;font-size:200%;border-radius:30px;}
.inactiveTab { background-color: #00204E; color:white;
background-image:none;font-size:160%;border-radius:30px;}
.rich-tabhdr-side-border { background-image: none; }
.rich-tabhdr-side-cell { border-top: none; }
</style>




   <vs:importvisualstrap />  
   
  
   <vs:visualstrapblock >  
  <apex:tabPanel switchType="client" 
id="AccountTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab"> 
<apex:tab label="Enquiry" name="EnquiryDetails" id="tabdetails" >
 <vs:row >  
     
       <vs:column type="col-md-6"> 
         
                <vs:panel title="Accounts Enquiry" type="info">  
                <span style="color:blue" rendered="{!AccountsEnquiry.size > 3}">
          
           <vs:well style="text-align:center;">  
              <vs:glyph icon="phone-alt" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!AccountsEnquiry.size}</span>  
              <p class="text-muted">Outstand Enquiry Accounts</p>  
           </vs:well>  
            
           </span>
           <apex:dataTable value="{!AccountsEnquiry}" var="AccEnqu" styleClass="table table-condensed table-hover table-bordered" rows="3">  
                         <apex:column headerValue="Name">  
                 <a href="#" onclick="openLookupPopup('{!AccEnqu.Id}'); return false" >{!AccEnqu.name}</a>
              
             </apex:column>  
             <apex:column value="{!AccEnqu.Account_Status__c }" headerValue="Status"/>  
             <apex:column value="{!AccEnqu.Account_Inquiry_Date__c}" headerValue="Enquired"/>  
             <apex:column value="{!AccEnqu.Office__c}" headerValue="Office"/>  
           </apex:dataTable>  
           <vs:alert rendered="{!AccountsEnquiry.empty}" type="warning" style="text-align:center">  
             <vs:glyph icon="exclamation-sign"/> No records to display  
           </vs:alert>  
         </vs:panel>  
         
       
       </vs:column>  
 
       <vs:column type="col-md-6">  
   
  <vs:panel title="Accounts Presentation Booked" type="primary">
   <div class="glow" rendered="{!AccountsPresentation.size!=0}"> 
         <vs:well style="text-align:center;">  
              <vs:glyph icon="book" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!AccountsPresentation.size}</span>  
              <p class="text-muted">Outstand Enquiry Accounts</p>  
           </vs:well> 
              </div>   
           <apex:dataTable value="{!AccountsPresentation}" var="accPres" styleClass="table table-condensed table-hover table-bordered" >  

           
           
             <apex:column headerValue="Name">  
                 <a href="#" onclick="openLookupPopup('{!accPres.Id}'); return false" >{!accPres.name}</a>
              
             </apex:column>  
             <apex:column value="{!accPres.Account_Status__c}" headerValue="Status"/> 
                          <apex:column value="{!accPres.Account_Inquiry_Date__c}" headerValue="Enquired"/>  
             <apex:column value="{!accPres.Office__c}" headerValue="Office"/>   
           </apex:dataTable>  
           <vs:alert rendered="{!AccountsPresentation.empty}" type="warning" style="text-align:center">  
             <vs:glyph icon="exclamation-sign"/> No records to display  
           </vs:alert>      
        
         </vs:panel> 
               
       </vs:column>  
            </vs:row>  

</apex:tab>
<apex:tab label="Presentation booked" name="Account Presentation" id="tabDestinyPresentation" >
    
        <vs:row >  
       <vs:column type="col-md-6">  
    
         
       <vs:panel title="Accounts FollowUp" type="primary"> 
     <div class="glow" rendered="{!AccountsFollowUp.empty}">     
 <vs:well style="text-align:center;">  
 
               
  <vs:glyph icon="earphone" style="font-size:40px"/>&nbsp;
  <span style="font-size:54px">{!AccountsFollowUp.size}</span>  
              <p class="text-muted">Outstand Enquiry Accounts</p>  
           
           
           </vs:well>  
             </div>  

           
           <apex:dataTable value="{!AccountsFollowUp}" var="AccFol" styleClass="table table-condensed table-hover table-bordered" rows="3">  
             <apex:column headerValue="Name">  
                 <a href="#" onclick="openLookupPopup('{!AccFol.Id}'); return false" >{!AccFol.name}</a>
              

             </apex:column>  
             <apex:column value="{!AccFol.Account_Status__c}" headerValue="Status"/>  
                          <apex:column value="{!AccFol.Account_Inquiry_Date__c}" headerValue="Enquired"/>  
             <apex:column value="{!AccFol.Office__c}" headerValue="Office"/>  
           </apex:dataTable>  
           <vs:alert rendered="{!AccountsFollowUp.empty}" type="warning" style="text-align:center">  
             <vs:glyph icon="exclamation-sign"/> No records to display  
           </vs:alert>  
         </vs:panel>  
                  
              

       </vs:column> 
       
        <vs:column type="col-md-6">  
       
       <vs:panel title="Accounts FollowUp" type="primary"> 

 <vs:well style="text-align:center;">  
              <vs:glyph icon="earphone" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!AccountsFollowUp.size}</span>  
              <p class="text-muted">Outstand Enquiry Accounts</p>  
           </vs:well>  
           <apex:dataTable value="{!AccountsFollowUp}" var="AccFol" styleClass="table table-condensed table-hover table-bordered" rows="3">  
             <apex:column headerValue="Name">  
                 <a href="#" onclick="openLookupPopup('{!AccFol.Id}'); return false" >{!AccFol.name}</a>
              

             </apex:column>  
             <apex:column value="{!AccFol.Account_Status__c}" headerValue="Status"/>  
                          <apex:column value="{!AccFol.Account_Inquiry_Date__c}" headerValue="Enquired"/>  
             <apex:column value="{!AccFol.Office__c}" headerValue="Office"/>  
           </apex:dataTable>  
           <vs:alert rendered="{!AccountsFollowUp.empty}" type="warning" style="text-align:center">  
             <vs:glyph icon="exclamation-sign"/> No records to display  
           </vs:alert>  
         </vs:panel>  
       
              

       </vs:column>               
     </vs:row>  
     </apex:tab>
    <!-- 
     <vs:row >  
     
       <vs:column type="col-md-6">  
                <vs:panel title="Tasks" type="primary">  
           <vs:well style="text-align:center;">  
              <vs:glyph icon="tasks" style="font-size:40px"/> &nbsp;<span style="font-size:54px">{!Tasks.size}</span>  
              <p class="text-muted">Tasks due for Today</p>  
           </vs:well>  
           <apex:dataTable value="{!Tasks}" var="task" styleClass="table table-condensed table-hover table-bordered" rows="3">  
             <apex:column headerValue="Subject">  
               <apex:outputLink value="/{!task.Id}">{!task.Subject}</apex:outputLink>  
             </apex:column>  
             <apex:column value="{!task.Status}" headerValue="Status"/>  
             <apex:column value="{!task.ActivityDate}" headerValue="Due Date"/>  
           </apex:dataTable>  
           <vs:alert rendered="{!Tasks.empty}" type="success" style="text-align:center">  
             <vs:glyph icon="ok-sign"/> No records to display  
           </vs:alert>  
         </vs:panel>  
       </vs:column>  
       
       <vs:column type="col-md-6">  
                <vs:panel title="Events" type="primary">  
           <vs:well style="text-align:center;">  
              <vs:glyph icon="briefcase" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!Events.size}</span>  
              <p class="text-muted">Future Office Events</p>  
           </vs:well>  
           <apex:dataTable value="{!Events}" var="Event" styleClass="table table-condensed table-hover table-bordered" rows="3">  
             <apex:column headerValue="Event">  
               <apex:outputLink value="/{!Event.Id}">test</apex:outputLink>  
             </apex:column>  
             <apex:column value="{!Event.subject}" headerValue="Subject"/>  
             <apex:column value="{!Event.ActivityDate}" headerValue="Date"/>  
           </apex:dataTable>  
           <vs:alert rendered="{!Events.empty}" type="warning" style="text-align:center">  
             <vs:glyph icon="exclamation-sign"/> No records to display  
           </vs:alert>  
         </vs:panel>  
       
       </vs:column> 
       
      
     </vs:row>  
      -->
     </apex:tabPanel>  
   </vs:visualstrapblock>  
 
   <!--
   <iframe id="iframeID" src="/01Z90000000AWM8"/>
   
   -->
 </apex:page>
Best Answer chosen by Developer.mikie.Apex.Student
Ashish_Sharma_DEVSFDCAshish_Sharma_DEVSFDC
Hi Developer.mikie.Apex.Student,

Use below line like.
<apex:outputPanel styleClass="{!if(AccountsEnquiry.size>5 ,'glow','Some Other CSS Class Name')}">
// Your Data
</apex:outputpanel>

Let us know if it helps you.

All Answers

Ashish_Sharma_DEVSFDCAshish_Sharma_DEVSFDC
Hi Developer.mikie.Apex.Student,

Use below line like.
<apex:outputPanel styleClass="{!if(AccountsEnquiry.size>5 ,'glow','Some Other CSS Class Name')}">
// Your Data
</apex:outputpanel>

Let us know if it helps you.
This was selected as the best answer
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Thank you, i ended up using the style of if statement within a div tag. It might also be worth mentioning, I was querrying the account list a certain way, then i changed it and that seemed to add to the code finally working. Thank you for your help ashish.