InfoPath Radio Button Bold Selection

This is just a quick little fun one.  In this post, I’ll show you how to make your radio button text show as bold when that radio button is selected, like this.  See, the “Approved” word is bold when selected.  This can be done in any version of InfoPath, but these instructions are specific to InfoPath 2010 and 2013.

197-image_2_44EA770E.png

  1. Add your radio buttons to InfoPath, without text next to them, just one under the other.
  2. Look at the properties of each radio button.  For my first radio button, I’m using the text “Approved” when it’s selected, and for the second one, it’s going to have the text “Rejected”.
    197-SNAGHTMLa11e2384_44EA770E.png
  3. On your form, put your cursor next to the first radio button, go to the Home tab and insert a new control, the “Calculated Value” control.  In the dialog box that pops up, type the word “Approved” in quotes, and click OK.
    197-SNAGHTMLa140320_44EA770E.png
  4. Put your cursor next to the second radio button, and insert another calculated field, and type the word “Rejected”, click OK.
  5. Here’s a trick so that the boxes will fit better wherever you put them, and will only take up as much space as the content inside them.  Open the properties of the “Approved” calc control.  (ALT+ENTER)  Go to the Size tab, and in the Width box, type Auto, and choose px.  Click OK. Do that for each calc control.
    197-SNAGHTMLa96ceab_44EA770E.png
    197-image_6_44EA770E.png
  6. Now, single click to select the “Approved” calculated box.  On the Home tab of the ribbon, click Manage Rules.
  7. In the rules pane on the right, click the New button, and choose Formatting.
  8. Click the blue word None, under Condition.  The name of the field behind my radio buttons is called SupervisorApproval.  So my condition is SupervisorApproval is equal to (type text ) Approved.  This is case sensitive, so look at my screenshot at step 2.  The word is capitalized.  Click OK.
    197-SNAGHTMLa9c7ce44_44EA770E.png
  9. Still in the rule pane, in the formatting section below the condition, click the B for bold.
    197-image_8_44EA770E.png
  10. Click to select the calculated field with the word rejected in it.  Create the same rule, except the condition is going to be that SupervisorApproval is equal to Rejected.

Done.  Preview your form, and click back and forth between Approved and Rejected, or whatever your options are, and see that the bold switches back and forth.  Pretty cool!

Technorati Tags: ,

4 comments

  • Just added this to a new form I’m creating. Works on other controls too since the magic happens on the calculated field not the radio option.

    This is the thing I like to read about as it makes such a difference to the visual appeal of forms.

    IMHO users don’t care actually what the form does, more how it looks.

    Like

  • I agree, and they sure do love picture buttons!

    Like

  • Hi Laura,
    My Option buttons refuse to behave. I am trying to size them to 25 px by 25 px but they keep setting themselves to width 100%. I can only set their width to auto or percentage, not pixels. I have done this before without incident but they now refuse to play.

    Any ideas why or how to resolve?

    Like

  • Sorry Guy, but I’ve never seen radio buttons act like that. Try deleting and recreating?

    Like

Leave a reply or question

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