Radio buttons without anything selected by default.

Radio buttons without anything selected by default.

Hi guys,

I have something in my mind a use case which is from my previous project implementation, and wanted to have an enlightenment on this concern.

The use case is as follows:

Upon display of the Popup editor, the radio buttons have nothing selected (neither Yes or No is selected). If the user submits the form without selecting anything, he cannot proceed because of that.

As far as my experience in this use case, the platform doesn't really allow blank radio buttons or radio buttons without a default value.

Is there a way to override OutSystems' error to allow a blank pair of radio buttons, or should I resort from using check boxes in this case?


Hi Ju-Chan,

You can have  3 radios, one of them invisible and that's the one that is selected by default.

Hope that helps
While the previous solution will work, it doesn't force the user to pick anything.

In a project I'm working on I had this exact requirement but we must force the user to choose 'Yes' or 'No' and having a default value was going to be a legal issue not just a technical one.  After scratching my head a little I came up with a fairly simple solution.

1) Use an integer variable or entity attribute with a default value of zero to hold the value

2) Create a screen variable called FirstPass and set it to True in your preparation or make True the default value

3) Create the radio buttons as usual (as many as you need), set the variable property to the integer created in step 1 and set the value property to any value that is not zero

4) Add an if condition with true set to 'not FirstPass and <variable or entity attribue> = 0' and in the true selection add some text saying you must pick one of the values.  Set the style of the text to 'ValidationMessage'.

5) When the Submit button is clicked and an action is called, in that action set FirstPass to false, ajax refresh the if widget and check the value of the variable or entity attribute.  If the value is zero, end the action.  (The attached image shows the important parts of this action.)

Hope this helps,

A radio button is selected whenever its value is the same as that of the variable it is bound to.
If the variable's value is diffferent from the value of any of the radio buttons, none will be selected.
If you bind two radio buttons, with values True and False, to a Boolean variable, then one will always be selected, since there are no null values in the Outsystems platform.

The simplest way I have found to implement your scenario is to bind the radio buttons to an Integer variable (default value is 0) and assign the Yes radio button a value of 1 and the No radio button a value of 2. On save, just check if the value of that variable is 1 or 2 to make sure the user has selected an option. If he didn't, use AJAX Refresh to display an error message.

This solution is essencially what Curt described, minus the "FirstPass" variable he mentioned.
Without the FirstPass variable the error message I implemented appears when the screen is first displayed, something I noticed prior to adding the FirstPass variable because I'm trying to force the user to click something, not just skip it.  If the field is not mandatory then yes you can skip the FirstPass stuff and the 'if' widget with the error message.
In this case, my field is mandatory, so I think that will suffice the requirement of the use case. 

The user really wanted his staff to "force to click something" on that certain field because it has a major impact in their productivity.

Thank you for the answers! =)
When I posted my solution in January 2015, my method worked.  I had to wipe out and recreate that logic recently and everything works fine except that setting the style to ValidationMessage now makes the text invisible always.  I know my logic is correct because just changing the style to none makes the text show up. It seems that the CSS now uses a display:none for this (shown below).  I can only assume this was a change somewhere along the way.

.ValidationMessage {
    color: #bf1601;
    position: absolute;
    border: 1px solid #bf1601;
    background-color: #fbd4c5;
    padding: 6px 10px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-left: -1px;
    white-space: nowrap;

To continue to use my solution you need to create a new style without the display:none syntax.  If anyone has a better solution feel free to post.  

Hope this helps someone,
Imho the usecase is invalid, since radiobuttons are not allowed to be completely empty in a group. Still, why so difficult? You have 3 radiobuttons, same group, different value. A 4th value is the initialvalue. Just check after the submit what the variable is? No need for hiding stuff?
Not sure how you can judge that my use case is invalid - my client thinks it is.  No problem.

I tried that in my first attempt.  The problem is that radio buttons do not have the Valid and ValidationMessage properties so when you detect that the initial value is still set you cannot set RadioButton.Valid to False as you can with other widgets.  FYI this is documented here -
Sorry, Meant the usecase of unselected radiobuttongroup by itself. But even that I will stand corrected.
Hi Ju-chan

If the values are Yes No this indicates a checkbox rather than radio buttons and the use case you outline can be implmented using 
Tri-state Checkbox. Purely on a UX point this is how I have seen your use case implmented on desktop and webrowser UI before. I personally find users dont know what they are as I guess developers did not know it was possible but just thought you might like a different opinion.

Outsystems doesn't have, natively, a tri-state check box.  That might have been a good solution.  All this discussion is good since it's making me rethink how I want to implement this.  I originally wanted the radio button functionality since, if I click on Yes, the No answer is reset, which 'seemed' like the easy way to go.  Since check boxes do have the Valid and ValidMessage properties I may use them in place of the radio buttons and do some OnChange logic to emulate what radio buttons do.

Thanks for the interesting discussion,
J. wrote:
Imho the usecase is invalid, since radiobuttons are not allowed to be completely empty in a group. Still, why so difficult? You have 3 radiobuttons, same group, different value. A 4th value is the initialvalue. Just check after the submit what the variable is? No need for hiding stuff?
The time I posted this question, the project was already live in production and everything is already rolled out. This use case is actually an enhancement-turned-escalated issue. After all, the testers know their users well enough to escalate this certain use case, though most of us know that this is kind of weird use case.

@George: It was also a nice option. Actually on top of my head, I would just handle it with JavaScript instead of having the flow do the disabling of these buttons. I didn't thought of that because I do not know how to code in JavaScript that time. Who knows, other people who have this kind of use case may find this post useful enough. :)