Form and ElementCollectionField layout

Hey friends,

I am struggling with splitting long lines of components of ElementCollectionField . The problem is that my embedded type has too many fields and then the scrollbar comes into play. I want to avoid this behaviour and fit everything without horizontal scrolling.

Hi,

There are couple ways to achieve this, but the best solutions is naturally quite domain specific (depends on what excact components you have on you row). The easiest way is naturally just to define the size of the components. If you want the layout to adapt to the available space, you can set some fields to be 100% wide and call
expand(String propertyname)
method or to more fine tuned expansion control
directly to the layout
.

But naturally this kind of UI pattern don’t “scale” if you have lots of properties you want to edit. In that case I’d either make a separate popup where the editor is opened instead of “inline editing”. That can also be combined with the inline editing so that you have only the most essential fields editable inline and then “edit…” button as last component that opens a full editor with all fields. I haven’t tried this kind of usage myself with ElementCollectionField, but if it is hard to implement I think we could plan some extension points for such.

cheers,
matti

Matti, thanks.

I have a follow up question. Say, if I have many-to-many relationship like doctors & surgeries and I want to allow user pick doctors for a each surgery how would I do that?

My point is that I do not want to modify doctors but to select a few.

Would it be ElementCollectionField or smth else?

Hi,

ElementCollectionField like “inline editing” is definitely good only for referenced entities that are tightly related to the master entity. The best UI pattern depends on how many doctors you have to choose from. If there is a “manageable” amount of them, I’d simply use
MultiSelectTable
or
CheckBoxGroup
.

If there are lots of them (and many properties users might be interested to sort and filter), I’d just list the selected ones in UI (with “remove” button) and have a separate button that opens “Choose doctor” dialog with table listing doctors with filtering and sorting. I have been planning to add a generic component like this to Viritin (with optional possibility to create new entities as well). If you’d like to create something like this, maybe we could collaborate to create a really useful one?

cheers,
matti

Hey,

I shall stick to a ElementCollectionField of combos where one could select as many doctors as needed.

Ok. So far this one is my lowest priority. Actually, I think that providing to ElementCollectionField a sub-class of Window may work well. In turn, this Window would do the job and

Now I have new headache, It can instantiate row classes only if they are static though I need to access mother form to check other components.

Hi,

You can provide an editor row instantiator strategy instantiage and configure the “editor row” just as you like. See
this example
. I hope it helps!

cheers,
matti