A c:OutputCheckbox for custom pages

While the is an apex:inputCheckbox there is not an apex:outputCheckbox. So its not obvious how to achieve this appearance for a checkbox field in a table in a custom page:

One way to do it is to define 3 components as below and use the c:OutputCheckbox one in the table passing in the boolean value:

// OutputCheckbox.component
<apex:component>
    <apex:attribute name="value" type="Boolean" required="true" description=""/>
    <c:CheckedImage rendered="{!value}"/>
    <c:UncheckedImage rendered="{!(!value)}"/>
</apex:component>

// CheckedImage.component
<apex:component>
    <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked"/>
</apex:component>

// UncheckedImage.component
<apex:component>
    <img src="/img/checkbox_unchecked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
</apex:component>

The image paths are taken from the corresponding elements in the default UI.

Advertisements

2 thoughts on “A c:OutputCheckbox for custom pages

  1. I use a different method but this works nicely. Previously I’ve set the disabled attribute of the checkbox to true and then style it accordingly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s