UI requirement: Matrix style grouping for radio buttons

Support
#1

Hello together

Attached sample shows a typical questionnaire where the question items have the same enum of answers. Also symbolized is an input field for additional information which is shown only under certain conditions.

I am trying to find out whether it is possible to build such a matrix style UI with JMIX build in Vaadin components. If not, what would be a suggested way to do so?

Question Item Group mit Detailzeile Sample

An even easier sample of what I like to achieve:
question with radiobuttons in table style

Thanks in advance

Michael

#2

Hi Michael
Perhaps you can use GridLayout with column span for the input field. See an example here.

#3

Thank you Konstantin, I took your hint in consideration and played around now for quite a while. It might be a good approach but when I use the datatype ENUM, this wan’t work. I tried to develop a style which overules the the settings of how Enums bound to radiobutton (display horizontal) but was not successful at all. I found no way to insert a GridLayout layer hosting the radiobuttons of Enums cell by cell.

Any more idea?

Thx a lot and best regards

Michael

#4

Hi Michael,

It is quite some years ago, but I did such an app as you described: GitHub - mariodavid/cuba-example-survey-ui: CUBA platform example that allows the user to take surveys

It is based on CUBA platform 6.4, but you might get the idea how it is done.

Perhaps this helps you for your problem.

Cheers
Mario

#5

Dear Mario, thank you very much for charing this great work. It might be a future leading path for us. For the moment our level of expertise in dynamic creation of UI elements does not seem high enough for this approach.

(… I would like to take the opportunity and express my appreciation for all your work you share at youtube!)

happy coding,

Michael

#6

Thanks, glad you liked it :+1:

So with the dynamic part, are you referring to the fact that you have static questions, that you want to put into code? This is true, in the example from above it was that those questions / answers where something business users wanted to configure. So if this is not needed then probably it is easier, since you don’t need to dynamically create the UI components and the data binding.

But does that mean, that you are storing those selected values as dedicated fields in dedicated entities?

Mario