I am looking for a way to conditionally render HTML based on the value of a field on an opportunity. I have taken multiple stabs at it but can't figure out where I'm going wrong. First I tried to work everything through one visualforce page using an IF statement, but then decided it may work better if I utilized components as well as a page.

Here's what I have, any guidance would be appreciated.


<apex:page standardController="Opportunity"

  IF(!opportunity.Contact_Attempts__c > 3, 

Components: - both use same code, just different message

<apex:component >  

h1 {text-align:center;color:green;font-size: 20px;width:100%;margin:0 auto}
#container {width:100%;margin:0 auto;text-align:center;}

<div id="container">
    <br />
    <h1> This prospect is still viable. Continue outreach. </h1>


2 Answers 2


Add your components inside apex:outputPanel and use rendered attribute to display and hide

<apex:page standardController="Opportunity" >

        <apex:outputPanel rendered="{!(opportunity.Contact_Attempts__c > 3)}" >
        <apex:outputPanel rendered="{!(opportunity.Contact_Attempts__c <= 3)}" >


As @sfdcfox suggested. Thanks for your suggestion.

<apex:page standardController="Opportunity" >

        <c:ViableOppComponent rendered="{!(opportunity.Contact_Attempts__c > 3)}"/>

        <c:DeadOppComponent rendered="{!(opportunity.Contact_Attempts__c <= 3)}"/>

  • 3
    Actually, all components, even custom components, come with a built-in "rendered" property, so you don't necessarily need to wrap it in another element...
    – sfdcfox
    Commented Apr 7, 2016 at 16:07
  • @sfdcfox in component also we can add rendered property ?
    – Ratan Paul
    Commented Apr 7, 2016 at 16:09
  • 2
    Yes, we can write your example as: <c:ViableOppComponent rendered="{!(opportunity.Contact_Attempts__c > 3)}"/><c:DeadOppComponent rendered="{!(opportunity.Contact_Attempts__c <= 3)}"/>
    – sfdcfox
    Commented Apr 7, 2016 at 16:12
  • @sfdcfox yes exactly this is.. I wasn't aware of that, thanks for info..
    – Ratan Paul
    Commented Apr 7, 2016 at 16:13

If no real need in creating a separate component - just use this on your div:

<div style="{!IF( myRenderCondition == false, 'display:none', '')}" >...</div>

You must log in to answer this question.

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