1

How can I make the "eye" image's visibility conditional with apex code? When the eye image is clicked, it updates a checkbox (Seen__c) on the associated account to true.

I want the "eye" image to only be visible if Account.Seen__c == false

Any suggestions?

enter image description here

VisualForce/HTML for reference

<div id="potentialAccs">
                        <apex:repeat value="{!potential_accs}" var="potAcc" id="potentialAccsList">
                            <div class="propertyRateDiv">
                                <table class="potAccTable" value="{!potAcc.Id}" onclick="return addProps('{!potAcc.Id}');">
                                    <thead>
                                        <tr>
                                            <td><strong>Property: </strong></td>
                                            <td class="properties">{!potAcc.Property__r.Name}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><strong>Region: </strong></td>
                                            <td class="region">{!potAcc.New_Region__c}</td>
                                        </tr>       
                                        <tr>
                                            <td><strong>Next Arrival: </strong></td>
                                            <td class="nextArrival">{!potAcc.Next_Arrival__r.Arrival_Date__c}</td>
                                        </tr>                                                 
                                    </tbody>

                                </table>
                                <div class="items">
                                    <div id="eye" value="{!potAcc.Id}" onclick="return hkSeen('{!potAcc.Id}');">
                                       <apex:image value="https://cs14.salesforce.com/resource/1447518498000/eye_icon" width="45px" height="45px"/>
                                    </div>                                   
                                </div>                                
                            </div>

                        </apex:repeat>
                    </div>
3

Use apex:image rendered attribute https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_image.htm

<apex:image value="https://cs14.salesforce.com/resource/1447518498000/eye_icon" rendered="{!!potAcc.Seen__c }" width="45px" height="45px"/>

instead of using div and add click event. just add click event in apex:image and pass the account id.

0
3

Using an HTML div (or span, or img, or table) tag with an onClick event will fail Section 508 (in the US), similar requirements in other countries, and WCAG 2.0. These elements can't gain keyboard focus, which means that they are inaccessible to screen reader software and other assistive technologies -- users who can't use a mouse or other pointer device can't access the functionality.

Since your onclick event doesn't leave the page, the semantic element to use here is a button. If you use apex:commandButton you'll have to wrap it in an apex:form and you'll want to return false in order to not rerender the page. Make sure you set the alt attribute to something useful and contextual that can be read aloud to people who can't see the button (such as, "Mark PROPERTY_NAME as seen").

<apex:commandButton 
  onClick="hkSeen('{!potAcc.Id}'); return false;"
  image="{!$Resource.eye_icon}" 
  alt="Mark {!potAcc.Property__r.Name} as seen" 
  rendered="{!!potAcc.Seen__c }" />

You can suppress the default button style by adding styleClass="noStyle" and using the following CSS:

body input.noStyle {
  border: none;
  background: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

If you're not planning on executing any Apex, you can also just use a standard HTML button tag and wrap it in an apex:outputPanel with layout="none". In this case you won't need to put it inside apex:form tags and clicking the button won't attempt to rerender the page, so you don't need to return false in the onClick:

<apex:outputPanel layout="none" rendered="{! !potAcc.Seen__c}">
  <button onClick="hkSeen('{!potAcc.Id}');" class="noStyle">
    <apex:image src="{!$Resource.eye_icon}" alt="Mark {!potAcc.Property__r.Name} as seen"  />
  </button>
</apex:outputPanel>

You'll need to change the noStyle class to:

body button.noStyle {
  /* same as button input.noStyle class above */
}

You have a similar issue with the onclick on your table -- it would be better to make this an explicit button rather than an onclick on a non-focusable element.

1

You can wrap your HTML in this apex:outputPanel that emits no markup but does allow the content inside to be rendered or not rendered:

<apex:outputPanel layout="none" rendered="{! !potAcc.Seen__c}">
    <div class="items">
        ...
    </div>
</apex:outputPanel>

This approach ensures there is nothing that can be clicked on when the eye is not rendered.

0

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.