1

I need a reusable component that will conditionally render a resource icon on a visualforce page.

<apex:page title="Visual Test">
    <apex:pageBlock title="Result Component">    
        <c:VisualResultComponent result="pass"/>
        <c:VisualResultComponent result="fail"/>
    </apex:pageBlock>
</apex:page>

I've tried multiple versions of this using both facets and image/render attribute, but cannot get any of them working.

From example one linked below:

<apex:component id="VisualResultComponent">
    <apex:attribute name="result" type="String" required="true" description="The result of a check"/>
    <apex:facet name="pass">
        <apex:outputPanel >
            <apex:image value="{!$Resource.Green_Tick_Icon}" width="50" height="50"/>
        </apex:outputPanel>
    </apex:facet>
    <apex:facet name="fail">
        <apex:outputPanel >
            <apex:image value="{!$Resource.Red_Cross_Icon}" width="50" height="50"/>
        </apex:outputPanel>
    </apex:facet>    
</apex:component>

From example two linked below:

<apex:component id="VisualResultComponent">
    <apex:attribute name="result" type="String" required="true" description="The result of a check"/>
    <apex:facet name="pass">
        <apex:outputPanel >
            <apex:image value="{!$Resource.Green_Tick_Icon}" width="50" height="50"/>
        </apex:outputPanel>
    </apex:facet>
    <apex:facet name="fail">
        <apex:outputPanel >
            <apex:image value="{!$Resource.Red_Cross_Icon}" width="50" height="50"/>
        </apex:outputPanel>
    </apex:facet>    

    <apex:outputPanel >
        <apex:image value="{!$Resource.Green_Tick_Icon}" width="50" height="50" rendered="{!if (result == "pass")}" />  <-- Idea from Example 2 below
        <apex:image value="{!$Resource.Red_Cross_Icon}" width="50" height="50" rendered="{!if (result == "fail")}"/>  <-- Idea from Example 2 below
    </apex:outputPanel>

</apex:component>

I've tried the method illustrated here but it just doesn't work, I suspect the example is wrong where it uses the same name for the facets, which contradicts the text in attributes description. However 'fixing' to match the text description still doesn't work. I've tried the method here with an inline conditional code, which won't even save for some reason.

1
  • You need to use rendered=expression
    – cropredy
    May 15, 2019 at 17:54

1 Answer 1

1

No answers, but I was able to solve this with the following code, posted incase anybody has the same question in future.

Page

<apex:page title="Visual Test">
    <apex:pageBlock title="Result Component">   
        pass <c:VisualResultComponent result="pass"/>
    </apex:pageBlock>
    <apex:pageBlock title="Result Component">   
        fail <c:VisualResultComponent result="fail"/>
    </apex:pageBlock>    
</apex:page>

Component

<apex:component id="VisualResultComponent">
    <apex:attribute name="result" type="String" required="true" description="The result of a check"/>
    <apex:outputPanel >
        <apex:image value="{!$Resource.Green_Tick_Icon}" width="50" height="50" rendered="{!if (result == "pass",true,false)}" />
        <apex:image value="{!$Resource.Red_Cross_Icon}" width="50" height="50" rendered="{!if (result == "fail",true,false)}"/>
    </apex:outputPanel>    
</apex:component>
2
  • You are using rendered , why not use it in the main VF page instead of making component? May 21, 2019 at 11:25
  • 1
    I used a component because I need it to be reusable so I can use it with multiple input values and on several pages. I do not want to edit every page for changes. May 21, 2019 at 11:32

You must log in to answer this question.

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