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"/> <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"/> <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"/> 
<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"/> <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>

</apex:tabPanel>
</vs:visualstrapblock>


</apex:page>

May 6, 2015
·
Like
0
·
Follow
1

Best Answer chosen by Developer.mikie.Apex.Student

Ashish_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.

May 6, 2015
·
Like
0
·
Dislike
0

This was selected as the best answer

Developer.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.

May 7, 2015
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Conditionally render Style based on List size.

All Answers

You need to sign in to do that.