How can I add check marks with a button? As user complete their section, it will show a check mark or an "X". Please see link for a screenshot: http://www.evernote.com/shard/s197/sh/8283848c-86d2-4945-bdd4-e8e85e34b949/6b62b17ff9e92c6c653a06bcd76cdf98

Any suggestion or direction is greatly appreciated.

  • I've updated my answer and made the output much nicer. Unfortunately, I don't think you'll be able to use a commandbutton for this UI, but you can get around this. – Caspar Harmer Jul 28 '15 at 1:29

I would use fontawesome for this. You can easily create buttons like this:

enter image description here

The code for this looks like this:

<a class="btn btn-info" href="#">Done
    <i class="fa fa-check fa-lg"></i></a>

<a class="btn btn-warning" href="#">Not Done
    <i class="fa fa-close fa-lg"></i></a>

You can add this class to anything you like - it can be a styleClass on a commandButton - anything you like.

The final piece of the puzzle is including fontawesome in the header of the page:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>

EDIT If you need to turn on an off these button styles, it may be easier to wrap a version of each inside an outputPanel for each tab:

<apex:outputPanel rendered="{!Account.SomeBooleanField__c}">
    <a class="btn"  style="background:LightBlue;padding:8px;text-decoration:none;display:inline-block" href="#">Done
        <i class="fa fa-check fa-lg"></i></a>
<apex:outputPanel rendered="{!NOT(Account.SomeBooleanField__c)}">
    <a class="btn"  style="background:Crimson;padding:8px;text-decoration:none;display:inline-block"  href="#">Not Done
        <i class="fa fa-close fa-lg"></i></a>
| improve this answer | |
  • Thank you very much. Do you happen to know how to make this dynamic? If a user input box is blank than display "Not Done X". If user input box is filled in then display "Done". – user7123 Jul 28 '15 at 0:37
  • How do I use this in my button? <apex:commandButton value="Overview" action="{!overview}" style="background:LightBlue;width:149px;height:49px;"/><br/> – user7123 Jul 28 '15 at 0:59
  • You are using a commandButton? I've been experimenting and I think you'll have to use the <a> tag as shown above in combination with an actionfunction (the <a> tag has an onclick that calls the actionfunction, which in turn calls the action on the controller) – Caspar Harmer Jul 28 '15 at 1:03
  • Ok, try my latest version - I've added inline styles that will make the <a> tag look very pretty. – Caspar Harmer Jul 28 '15 at 1:27

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.