0

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.

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

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>
  • You are using rendered , why not use it in the main VF page instead of making component? – Pranay Jaiswal May 21 at 11:25
  • 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. – Martin of Hessle May 21 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.