How to minimize Search and Select component?

Hello,

I’m new to Constellation and just built UI for search and select as below.

  • I configured a Field Group as Collapsible, but it is still expanded by default when the screen first loads. Is there any OOTB way to have it collapsed by default?

  • The Search and Select component takes up a lot of screen space. In Cosmos, it was easy to open this kind of selection UI in a modal. Is there any simple or recommended OOTB way to achieve a similar, more compact UI in Constellation?

Is this a current product limitation, or am I missing a recommended pattern?

Regards,

Hi @CloeW938

To answer your questions,

  1. Field group is always expanded by default. May be in future releases/versions we might get an option to control the expand or collapse behaviour on load.
  2. Search and Select is a pre-defined structure where you can only configure the fields to search (in single group or multiple groups) and columns to display. There is no way we can modify the layout.

One suggestion is to convert this layout to embedded table where user will click on the Add Branch and you open a modal where you can put this same search and select inside it. Perform the search and select to choose a Branch from the results. On the submit click, in Post action you can copy back the single data reference selected to the embedded list and modal closes. Your embedded table will have a entry added.

In addition to this you can add a when condition for Allow Adding records to check for only one record exist in the list. This way after adding one record your Add Branch button will not be shown. This way you can mimic the single select behaviour.

If you are in v25, then you will have support for View and as well as Action option for opening a modal. The above suggestion works if you can have the Action option available for you.

Hope this helps

Regards

JC

2 Likes