function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dburks_gooseheaddburks_goosehead 

Conditionally Display an Image on Visualforce Page

I created the code below to display an image - I use this as a visualforce element on a page layout.  

 

<apex:page standardController="Carrier__c" >
<img src="{!$Resource.SafecoMap}" width="772" height="496"/>,
</apex:page>

 

What I need to do is add logic to display the correct image depending on the name of the record so something like:

 

<apex:page standardController="Carrier__c" >

IF Carrier__c.Name="Safeco", <img src="{!$Resource.SafecoMap}" width="772" height="496"/>,

IF Carrier__c.Name=...

</apex:page>

 

This way I can display the appropriate image for each carrier record.  Does anyone know the correct syntax to accomplish this?

Best Answer chosen by Admin (Salesforce Developers) 
Kent ManningKent Manning

I tried your code in my dev org.  Here is what worked for me..

 

<apex:page standardcontroller="user" recordsetvar="emp">
    <apex:pageblock >
        <apex:pageblocksection >
           <apex:pageblocktable var="e" value="{!emp}">

                 <apex:column headervalue="name"  value="{!e.name}"/>
                 <apex:column headervalue="Phone Number"  value="{!e.phone}"/>
                 <apex:column headervalue="Country"> {!e.Country}&nbsp; 
                     <apex:image id="theImage" value="{!If(e.Country == "Germany", $Resource.Logo_GmbH, If(e.Country =="United Kingdom", $Resource.Logo_UK, $Resource.EUQuote_Logo_blue))}" width="25" height="12"/>
                 </apex:column>
            </apex:pageblocktable>
         </apex:pageblocksection>    
    </apex:pageblock>
</apex:page>

 

The things that you do need to change are showen in red ( you need to put the e. in front of country since this is your table variable):

 

      <apex:pageblocktable var="e" value="{!emp}">

 

               <apex:column headervalue="name"  value="{!e.name}"/>

               <apex:column headervalue="Phone">  {!e.phone} &nbsp;  <apex:image id="theImage" value="{! IF(e.Country__c == "India", $Resource.Ssmiley IF(e.Country__c =="Australia", $Resource.Hsmiley, $Resource.Bsmiley))}" width="772" height="496" />. 

               </apex:column>

 

     </apex:pageblocktable>

 

 

 

 

 

All Answers

Chamil MadusankaChamil Madusanka

Use apex:image tag with rendered attribute. You can display the image on a condition from rendered attribute. refer following links. It will be helpful for you to understand the image tag, rendered and functions in visualfroce

 

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_image.htm

 

http://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_functions.htm

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
Kent ManningKent Manning

You would need to write your code like this:

 

<apex:page standardController="Carrier__c" >
<img src="{!$Resource.SafecoMap}" width="772" height="496" rendered ="{!Carrier__c.name =='Safeco'}" />,
</apex:page>

 

As long as the rendered condition evaluates to true then this image will be displayed.

Hope that helps.
tsritsri

<img src="{!$Resource.SafecoMap}" width="772" height="496" rendered ="{!Carrier__c.name =='Safeco'}" />,

 

what is "SafecoMap" and "Safeco" mentioned in the img tag...

 

can u please clarify me on the same...

 

even I am trying to do the same type of VF page but its showing the same image for all conditions

 

I am doing for the country conditions... 

but its displaying same image for all the countries ....

 

 

 
dburks_gooseheaddburks_goosehead
Safeco is basically one of the products my company sells. We have a custom object where we store information about each of our products, including a map that shows in which states that product is available. So in this use case, the Name field determines whether an image is rendered or not. So what I have done is added all the maps to the page, but only render the one that matches the name given to the record.

You can also use a formula (text) field to display images based on criteria. More info on that can be found here https://success.salesforce.com/questionDetail?qId=087300000007AKrAAM.

I hope this is helpful.

_______________________________________________________________________

DREW W. BURKS Risk Manager
_______________________________________________________________________

214-838-5221 phone
866-877-6250 fax

100 East Royal Lane, Suite 320
Irving, Texas 75039

Drew.Burks@twginsurance.com | www.twginsurance.com


[10yrTWGLOGOsm]
_______________________________________________________________________

[Description: Description: Description: Description: Description: fb icon][Description: Description: Description: Description: Description: linked in icon][Description: Description: Description: Description: Description: twitter icon]
P Please consider the environment before printing this e-mail

This electronic mail transmission contains confidential information intended only for the person(s) named. Any use, distribution, copying or disclosure by any other person is strictly prohibited. If you received this transmission in error, please notify the sender by reply e-mail and then destroy the message.
Kent ManningKent Manning

The "SafecoMap" and "Safeco" are specific fields/values for the org of dburks_Twg.  You would have to contact the individual that made the original post to find out what they are.

 

In your particular case you would have to write some logic into your img tag.  You could do this a couple of ways, depending on the number of countries and images you are trying to switch.  

 

Example 1:

 

<img src="{!$Resource.UKlogo}" width="772" height="496" rendered ="{!Country__c=='United Kingdom'}" />,

<img src="{!$Resource.Germanylogo}" width="772" height="496" rendered ="{!Country__c=='Germany'}" />

<img src="{!$Resource.Japan}" width="772" height="496" rendered ="{!Country__c=='Japan'}" />

etc.

 

Example 2 (Nested IF statements):

<img src="{! IF(Country__c == "United States", $Resource.USlogo, IF(Country__c =="United Kingdom", $Resource.UKlogo, $Resource.Japanlogo))}" width="772" height="496" />. 

 

Although I've never tried it, you might be able to replace the IF statements with a Case statement which might simplify things

 

Example 3 (Case Statement):

 

<img src="{! Case(Country__c, "United States", $Resource.USlogo, "United Kingdom", $Resource.UKlogo, "Japan", $Resource.Japanlogo, $Resource.DefaultLogo) }" width="772" height="496" />

 

Hope that gives you some ideas to try.
tsritsri

I have tried with the page below:

 

 

<apex:page standardcontroller="employee__c" recordsetvar="emp">

<apex:pageblock>

<apex:pageblocksection>

<apex:pageblocktable var="e" value="{!emp}">

 

<apex:column headervalue="name"  value="{!e.name}"/>

<apex:column headervalue="name"  value="{!e.phone}"/>

<img src="{! IF(Country__c == "India", $Resource.Ssmiley IF(Country__c =="Australia", $Resource.Hsmiley, $Resource.Bsmiley))}" width="772" height="496" />. 

 

</apex:page>

</apex:pageblock>

</apex:pageblocksection>

</apex:pageblocktable>

 

 

Hsmiley, Bsmiley Smiley are the images which I have saved in my static resources..

 

but <img....> doesn't reflect anychange in my output....its jus showing name n phon field.

 

Also, if i put <img...> in column then the images are appearing in a separate column but i want the images to be rendered to the name itself.......
Kent ManningKent Manning

I tried your code in my dev org.  Here is what worked for me..

 

<apex:page standardcontroller="user" recordsetvar="emp">
    <apex:pageblock >
        <apex:pageblocksection >
           <apex:pageblocktable var="e" value="{!emp}">

                 <apex:column headervalue="name"  value="{!e.name}"/>
                 <apex:column headervalue="Phone Number"  value="{!e.phone}"/>
                 <apex:column headervalue="Country"> {!e.Country}&nbsp; 
                     <apex:image id="theImage" value="{!If(e.Country == "Germany", $Resource.Logo_GmbH, If(e.Country =="United Kingdom", $Resource.Logo_UK, $Resource.EUQuote_Logo_blue))}" width="25" height="12"/>
                 </apex:column>
            </apex:pageblocktable>
         </apex:pageblocksection>    
    </apex:pageblock>
</apex:page>

 

The things that you do need to change are showen in red ( you need to put the e. in front of country since this is your table variable):

 

      <apex:pageblocktable var="e" value="{!emp}">

 

               <apex:column headervalue="name"  value="{!e.name}"/>

               <apex:column headervalue="Phone">  {!e.phone} &nbsp;  <apex:image id="theImage" value="{! IF(e.Country__c == "India", $Resource.Ssmiley IF(e.Country__c =="Australia", $Resource.Hsmiley, $Resource.Bsmiley))}" width="772" height="496" />. 

               </apex:column>

 

     </apex:pageblocktable>

 

 

 

 

 

This was selected as the best answer
tsritsri

Thanks!!!!! that worked for me...........
U JayU Jay

I have an object Comment that hold a comment,name of the person.I want to display name,comment  and photo of the person(where i want to get the photo from account of the person whose name is going to display).The number of such rows depends on the availability of the comments.Can anybody give key to th vf page and controller.
Alexander Charles GilfellonAlexander Charles Gilfellon
What if we have 200 countries and would like to display logo/flag of each country when the particular country is selected. How do we solve such a problem? Do we write 200 else if conditions or could we make modifications in extension a or controller class? Or is there any other solution to such a problem.