Value of a custom RadioButtonGroup?

Folks, I have a seemingly simple requirement of showing 2 RadioButtons, see below. If the first “Self” is selected, the group should have a value of a pre-set Integer. If the second “Team Member” is selected, that value should be the Integer selected from the ComboBox or null if nothing is selected. I’m struggling with designing the type of the item of the RadioButtonGroup, and getting the correct value from pre-set value associated with the RadioButton of the first item, and the selected value of ComboBox. Any ideas how to accomplish this?

Screenshot 2024-06-12 at 9.49.58 PM

Have two fields in your model:

  • Type (person / group)
  • Number

If person is selected, just store the number.
If group is selected, show a text field below the radio group for the user to enter a value.

@imeshev

@knoobie is right.

but in your case it will be much more easier to use checkbox and not radiobutton
wrapped in CustomField

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class TeamMember {

    private int id;
    private String name;

}


public class TeamMemberSelector extends CustomField<Integer> {

    private final Checkbox self;
    private final Checkbox team;
    private final Select<TeamMember> teamMembers;
    public TeamMemberSelector() {
         self = new Checkbox("Self");
         team = new Checkbox("Team");
        teamMembers = new Select<>();
        teamMembers.setLabel("Team Members");
        teamMembers.setItemLabelGenerator(TeamMember::getName);

        List<TeamMember> teamMembersList = new ArrayList<>();
        teamMembersList.add(new TeamMember(1,"John"));
        teamMembersList.add(new TeamMember(2,"Jane"));


        teamMembers.setItems(teamMembersList);

        add(self, team, teamMembers);
        self.addValueChangeListener((e)-> {
           team.setEnabled(!self.getValue());
           if (self.getValue()) {
               teamMembers.setValue(null);
               teamMembers.setEnabled(false);
           }
        });
        teamMembers.setEnabled(false);
        team.addValueChangeListener(e -> {
            teamMembers.setEnabled(e.getValue());
        });
    }

    @Override
    protected Integer generateModelValue() {

        /** your biz logic **/
        if (self.getValue()) {
            return 1;
        }
        if (team.getValue()) {
            if (teamMembers.getValue()!=null) {
                return teamMembers.getValue().getId();
            }

        }
        return 0;
    }

    @Override
    protected void setPresentationValue(Integer integer) {

    }

image

@ecohen280, thanks for the idea. The requirement is using the RadioButtons. I imagine CheckBoxes could be twisted into looking as RBs, but I’d like to avoid this.

@knoobie thanks. So, how do I go from the model above to the required L&F ?

What do you mean with “LF”? look and feel?

Like you would do with any other form, you create a binder with your bean / dto / class, assign the fields. Only thing to keep in mind: add a value change listener to the radio button group that shows / hides the required dropdown you mentioned.

Only thing to keep in mind: add a value change listener to the radio button group that shows / hides the required dropdown you mentioned.

I don’t really need to hide anything. The user needs to pick either themselves, or a user from a dropdown.