+ Start a Discussion
Shubham arora 26Shubham arora 26 

Show Image based on Values selected in Multi-picklist field in VF Componet

Hi,

I want to show an image(Static resource) in visualforce component based on the value selected in Multi-Picklist. For e.g if values are Contact center completed OR Medical information Completed then only i want to show that image in front of another field. The moment those values are removed from picklist, i want to hide the image. How can i achieve that? 

Please suggest

Thanks
Shubham
SARI4SARI4
You can create a boolean in Controller on page load you can set it true or false based on selected values.
If you are on edit screen then you may use onchange attribute to set the boolean and render the image section.
Shubham arora 26Shubham arora 26
Hi SARI4,

The problem is that Onchange is not working on Multi select picklist field. Below is the code
Component code-
<div class="row clearfix MIsectionPanelCls" style="display:none;">
                                    <apex:outputPanel rendered="{!subcaseForRequestEdit.AV_Affiliate__c=='USA'}" id="VerbalResponse">                       
                                    <div class="col-md-12 column" style="padding-bottom:10px;">
                                            <div class="col-md-1 column">
                                           <!--  &nbsp;&nbsp;&nbsp;&nbsp;<apex:inputCheckbox id="VerbalCheck"  value="{!selectedRequestForEdit.AV_Verbal_Response__c}" disabled="{!(isVerbal1==False)&&(selectedRequestForEdit.AV_Verbal_Response__c!=True)}" />-->
                                                
                                                <apex:inputCheckbox id="VerbalCheck"  value="{!selectedRequestForEdit.AV_Verbal_Response__c}" disabled="{!(isVerbal1==False)}"/>
                                                 <apex:image url="{!URLFOR($Resource.AV_Required_to_Complete_Image)}" style="margin-left: 18px" rendered="{VerbalAstric}"/> 
                                               

                                            </div>                                     
                                            <div class="col-md-11 column">    
                                                <label class="control-label ">{!$Label.AV_VERBAL_RESPONSE}</label>                                
                                            </div>
                                    </div>
                                     </apex:outputPanel>
                                </div>
                            </div>
                        </div>     


<div class="col-md-12 column MIsectionPanelCls" style="display:none;">
                                <div class="row clearfix">
                                <div class="col-md-12 column ">
                                    <div class="col-md-1 column">
                                        <label class="control-label">{!$Label.AV_Resolution}<span class="mandateStar">*</span></label>
                                    </div>
                                    <style>
                                    .multiselectResolution td.multiSelectPicklistCell{ padding: 0 20px;}
                                    </style>
                                    <div class="col-md-11 multiselectResolution">
                                            <apex:inputField value="{!selectedRequestForEdit.AV_Request_Resolution__c}" styleClass="form-control ExampleCustom" style="height:80px;min-width:105%;"/>
                                            <apex:actionSupport event="onchange" rerender="VerbalResponse"/>
                                    </div>
                                </div>
                                </div>
                            </div>


Controller code: 
Public boolean VerbalAstric{get;set;} 

 List<String> resolutionList =New List<String>();
            if (requestSwitchVariable.AV_Request_Resolution__c!=null && requestSwitchVariable.AV_Request_Resolution__c.contains(';')) {
                    resolutionList = requestSwitchVariable.AV_Request_Resolution__c.split(';');
                    system.debug('GMIS 4.2 Resolution List'+resolutionList );
               }

 If(resolutionList1.contains(Label.AV_Medical_Information_Completed)||
            resolutionList1.contains(Label.AV_Contact_Center_Completed)){
                 VerbalAstric=true;
                }
               
                else{
                VerbalAstric=false;
                }
system.debug('VerbalAstric'+VerbalAstric);