AnsweredAssumed Answered

Radio Buttons with Alternate values--A MiniBlog

Question asked by philmodjunk on Sep 28, 2012
Latest reply on Sep 28, 2012 by davidanders

Title

Radio Buttons with Alternate values--A MiniBlog

Post

     This is not a question it's a narrative description of an interesting problem and how I solved it

     The situation:

     I'm creating a new data entry screen for users that will be entering data in a point of sale-customers waiting in line type of environment. Thus, it is crucial that users be able to enter data rapidly and accurately in order to serve as many customers as possible in the least amount of time.

     A field in this screen is located inside a portal row and will have either an "R" or a "B" entered into it 99.99% of the time, but once in a very great while, the user might have to enter one of four other values.

     A radio button format makes for the best speed here as they can just click a radio button and go to the next field, but there isn't room on the layout for 6 radio button values and including the 4 rarely used values also produces unwanted "visual clutter". I considered using a drop down list or pop-up menu but didn't want even that trivial bit of extra "mousework" selecting a value from such a list to slow down the users.

     Here's what I came up with:

     I placed one copy of the field in the portal row and formatted it with radio buttons using only a two-value value list of "R" and "B". I then placed a second copy of the same field next to it and formatted it as a drop down list of values and gave it the full 6 value value list--selecting "use values from a field" so that I can use a table of values I that I created for this purpose in order to include a second column of info that identifies the meaning for each of the 1 or 2 letter codes that comprise this list of values. I selected the arrow option in the Inspector and then resized the field so that the only part of the field that was visible was that very same arrow.

     So far, so good. The user can select R or B by clicking the radio button or they can select any of the other values by clicking on the arrow and selecting from the drop down. But now, when a user selects a value other than R or B, the field appears empty with just two unselected radio button values visible.

     To solve that problem, I then added a third copy of this field to the layout. I made sure that it was transparent, used behavior settings to block user access when in browse mode and placed it on top of the radio button formatted copy, sized to completely cover it, but not the arrow-drop down list formatted copy of the field next to it. I selected a font size of 100 pts for this field so that its contents are invisible and the radio buttons below will show through.

     Now to do some "magic" with conditional formatting. I needed to make the radio buttons disappear and the selected letter code to appear anytime a value other than R or B is selected from the drop down.

     My first attempt to get what I wanted was to give it this conditional format expression:

     not PatternCount ( "RB" ; Self ) and not IsEmpty ( Self )

     I selected a Fill color of white and a font size of 12 for this conditional format so that when the field contained a value and it was not R or B, the contents of this field would be visible and the solid fill color would hide the radio buttons in the field behind it. This worked well, but I still had a minor problem. My portal specified alternating row colors. The text in this field would appear when I needed it, but the field's fill color didn't match the row color half of the time.

     I then made a final adjustment to my design. I modified the conditional format of this copy of the field so that it no longer specified a fill color--leaving the field transparent. I then selected the radio button formatted copy underneath it and gave it the same conditional format expression:

     not PatternCount ( "RB" ; Self ) and not IsEmpty ( Self )

     But specified a font size of 135. (Testing revealed that a portion of the radio button was still visible at font size of 100.)

     This now gave me all the features I wanted, the ability to rapidly select the most common two values but also a simple way to select additional values and be able to see and edit the selected value in both cases.

     Notes:

     Why not just hide the text by setting a font size of 500?

     Recent discussions at a DigFM meeting at Filemaker Inc. headquarters in Santa Clara revealed that in some circumstances. (Especially FM GO 12 on iOS devices), there can be a significant performance penalty when using a font size of 500 to conceal text so I now make it a practice to only specify the minimum size change needed to make conditionally formatted text invisible.

     Field Behavior Oddities:

     With this setup, you can select R or B from the drop down and see the radio buttons update to select the value. It looks a tiny bit weird and I considered omitting those two values from the drop down's value list, but decided to include them anyway so that the drop down documents the meaning of all letter codes that might be entered into this field.

     A bit more strange is that if you select a value other than R or B from the drop down and then click on the field displaying the selected value, the mouse click drills through the field and selects a value in the radio button beneath it--thus producing a rather unorthodox way to change the values in the field.

     I judged both of these behaviors to be too minor to worry about when users start using this updated interface in the near future.

RadioButtonAlt.PNG

Outcomes