Radio Button in Table Records

Radio Button in Table Records

  

I've got a Table Records with a list of available times (Column A) and in Column B I have placed a Radio Button.


I would like that the user selects one of the times in the list by clicking one of the radio buttons in the corresponding column.  Then click the "save" button, assign the time ID to a local variable and pass it to the next webpage.


Unfortunately even after reading outsystems help and watching YouTube Widgets II on radios, I don't think I understand how to make the radio button work properly.  I thought maybe I could use a boolean as a source in my aggregate, and then set the radio variable to BOOLEAN.VALUE and the VALUE to TRUE when the button is clicked.  Unfortunately this has resulted in a webpage where I can click the button and add the black dot, but I can click every single button in the list, which is not correct.  It seems that the button is not mutually exclusive across multiple rows.


I also tried setting the radio button variable as type TIME.ID and then the value to the TableList.Current.Time.ID....but when I do this and run the debugger, and click SAVE the LOCAL VARIABLE is always "0".  It never assigns an actual TIME.ID to the local variable.


So then in the save action, I performed a FOR EACH and looped through the records.  I used an IF statement that says if the BOOLEAN.VALUE is true, assign the TIME.ID to my variable, then go to the next webpage.  It seems like this works, but I wonder if this is not the correct way to do a radio button?


I'm hoping that more experienced users here can help me properly use the radio to select 1 time in a list.


EDIT: I realize that perhaps a drop-down list or other widget might actually be better here, but this would hopefully help me to understand how to make radios work properly.



Solution

Hi Rob,

Try this:

  • Add a local variable to the screen (data type: <entity you use in TR> Identifier). E.g. MyEntityId.
  • Add the RB to the TR. Set its variable as MyEntityId.
  • For the value of the RB, set it to <TR>.List.Current.<MyEntity>.Id

When you submit, variable MyEntityId will hold the selected Id.

Radio buttons work as a group as long as they use a common single variable. That's why your first approach was close but didn't work out (using a boolean from the aggregate would let you select multiple RBs - because you had a different variable per row).


«EDIT: I realize that perhaps a drop-down list or other widget might actually be better here, but this would hopefully help me to understand how to make radios work properly.»

Agree. :)

Solution

Hello Rob.

I don't think you can use radio buttons across multiple elements on a table records.


Radio buttons are grouped together by the variable that they bind to. So you would need a single variable and bind all radio buttons to the same variable. That way they would be grouped, and you could select only a single value for them.

If you have a table records with a structure with fields TimeId and IsSelected, and bind a radio button to the IsSelected attribute, you are in fact binding each radio button to a different record (thus a different variable). So they will not be grouped together, and you would be able to select multiple radio buttons.

You can try having a single screen variable called TimeId, and bind all radio buttons to this same variable. I don't know if that would work - let me know if it does.


I can see two easy options for you scenario:

One would be to use checkboxes, and somehow make sure that only a single one is selected. You can do that with a validation when you click the save button (if more than one checkbox is selected, throw an error). Or you can do it with javascript (onclick of a checkbox, uncheck all other checkboxes). Checkboxes are easier to work with than radio buttons, and users nowadays rarely come across radio buttons. And that name! What on earth is a *radio* button?

Another option is to include a link or a button on each row that toggles the state of the row. Clicking the button would select that row, and you can refresh the row and display it in different colors to give feedback that the row is selected. Or, if possible, the button would just perfom the "save" logic using that row - one less click for the user.

Hello Rob,

It's perfectly possible to do what you want, using a Table Records and Radio Buttons.
And Fernando pointed you in the right direction.

What you have to do is to create a local variable or session variable (ex. Session.SelectedTime), and associate the radio button with this variable. Than, set the radio button Value to the ID of the record (ex. TableRecords.List.Current.YourEntity.Id) or the Time value (ex. TableRecords.List.Current.YourEntity.Time). Remember to set the local/session variable data type correctly.

When you press the "Save" button, the local/session variable will be automatically set to the value chosen by the user, before the action is executed.

I attached an example for you.
You can see it here: https://eduardojauch.outsystemscloud.com/RadioButtonTest/Home.aspx?_ts=636522935893409405


Cheers.