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
Nathan MarchantNathan Marchant 

Display Images based on picklist field on Communities

Hi,

I am very new to devleoping in salesforce and i was hoping someone could point me in the right direction. 

Basically on my community I want to display an image based on the value of a picklist field on account. For each selected value i want to display a different image. Does anyone know the best way of doing this?

Im am guessing building a Custom Visualforce page/componet is the way to go. 

Maybe there is a way if doing this using HTML/Javascript

Sorry my question is so broad. Any help would be great. 
Best Answer chosen by Nathan Marchant
Akshay_DhimanAkshay_Dhiman
    Hi Nathan Marchant.

    Try the below code.
  
<apex:page>
            <head>
                <script>
                window.onload=function()
                {
                    document.getElementById("img1").style.display='none'; 
                    document.getElementById("img2").style.display='none'; 
                    document.getElementById("img3").style.display='none'; 
                }
                function myFunction()
                {
                    var pick= document.getElementById("picvalue").value;
                    if(pick == 'select')
                    {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '1')
                    {
                        document.getElementById("img1").style.display='block'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '2')
                    {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='block'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '3')
                        {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='block';
                    }
                }
                </script>
            </head>
            <apex:form>
                <select id='picvalue' onchange="myFunction()">
                <option value="select">...Select...</option>
                <option value="1">Image 1</option>
                <option value="2">Image 2</option>
                <option value="3">Image 3</option>
            </select>
            </apex:form>
            <div id='img1'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 1</p>   
            </div>
            <div id='img2'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 2</p>  
            </div>
            <div id='img3'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 3</p>  
            </div>
            
        </apex:page>


        
   Thanks.
   Akshay

All Answers

Ajay K DubediAjay K Dubedi
Hi Nathan,

The validation rule works in communities also. No need of creating additional components or VF pages for that.

You can try the below validation rules:
IMAGE(
Case(
Your_picklist_field__c, 
"picklist_values_1__c", "Your URL field here",
"picklist_values_2__c", "Your URL field here",
"picklist_values_3__c", "Your URL field here",
 "alt_image_url"
    ),
    "picklist__c"
)

Try the below helpful reference:

https://help.salesforce.com/articleView?id=fields_useful_validation_formulas_community.htm&type=5

https://help.salesforce.com/articleView?id=customize_functions.htm&type=5#customize_functions

Thank you,
Ajay Dubedi
Nathan MarchantNathan Marchant
Hi Ajay,

As this is a validation rule am I right in saying this means the image only shows when the user is interacting with this picklist field. 

In my case I only want an image to appear when the user logs into the community. I dont was the user to be able to change or see any fields. 

Thanks,
Akshay_DhimanAkshay_Dhiman
    Hi Nathan Marchant.

    Try the below code.
  
<apex:page>
            <head>
                <script>
                window.onload=function()
                {
                    document.getElementById("img1").style.display='none'; 
                    document.getElementById("img2").style.display='none'; 
                    document.getElementById("img3").style.display='none'; 
                }
                function myFunction()
                {
                    var pick= document.getElementById("picvalue").value;
                    if(pick == 'select')
                    {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '1')
                    {
                        document.getElementById("img1").style.display='block'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '2')
                    {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='block'; 
                        document.getElementById("img3").style.display='none';
                    }
                    else if(pick == '3')
                        {
                        document.getElementById("img1").style.display='none'; 
                        document.getElementById("img2").style.display='none'; 
                        document.getElementById("img3").style.display='block';
                    }
                }
                </script>
            </head>
            <apex:form>
                <select id='picvalue' onchange="myFunction()">
                <option value="select">...Select...</option>
                <option value="1">Image 1</option>
                <option value="2">Image 2</option>
                <option value="3">Image 3</option>
            </select>
            </apex:form>
            <div id='img1'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 1</p>   
            </div>
            <div id='img2'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 2</p>  
            </div>
            <div id='img3'>
                <img src="{!$Resource.Velocity}" />
                <p>Image 3</p>  
            </div>
            
        </apex:page>


        
   Thanks.
   Akshay
This was selected as the best answer