I have a requirement to build a UI similar to below image in constellation - It has to be a collapsible - grouped by id.
The screen should present a list of item which has to be grouped by ID (collapsible). And it should also present a list of value to be selected ( a table preferably) with the same id.
In the image it show just 1 value as Option 1.1 but it can also be a table having multiple columns.
I dont think in Constellation, this exact control is available out of the box as a native âgrouped multi-select dropdown with collapsible sectionsâ. The closest supported approaches are to either pre-group the data and render it with repeating views/field groups or build a custom DX component if the UX must match that pattern closely.
I would not try to reproduce that control literally as a dropdown in Constellation, Iâd prefer to preprocess the source list into a grouped page structure by Id, render each group as a Field Group / collapsible section and inside each group, show the selectable values as either checkboxes or a repeating/table-style view.
If you need a table inside each group, it conceptually means one outer repeating structure for the group and one inner repeating view/table for the rows under. If the inner content must be richer than a single label (multiple columns), then a nested repeating view can be used rather than trying to force a standard multi-select control to do grouping.
If the requirement is to match the UX very closely, especially with grouped multi-select behaviour inside a dropdown, then this is probably a custom DX component use case. If the business is flexible on presentation, a grouped collapsible repeating view is the most supportable option
Looks like complicated and use case driven component? Does it need to be expandable like a dropdown with table? If yes then this is candidate for DX component.
Other wise I propose table, or any of other controls and table being displayed conditionally.
Table is using functionality of Grouping.
The outcome is to select the right items? (data references). Further you want the UX so we can select multiple of certain groups?
This can be done with multi-select as table or even âsearch and selectâ pattern? Search the âgroupâ you want, then select all? Iâd argue its a better UX as a cascading expandable dropdown could lead to inadvertently selecting wrong items when the list is long - searching first, then selecting all you have at least some mitigation of that.
