When laying fields in multiple columns of a field group, sometimes you want to have some specific fields aligned between columns. With a grid layout you would simply specify at which column and row you want them at. But currently only way is to pad with blank fields, created with arbitrary id (e.g ‘blank1’) and set to ‘custom’ without code behind, which yields in effect an invisible and inoperative field.
I would suggest either a simpler option to put blank fields as padding (without the hack previously described), or, better, being allowed to define row and column for each field within a field group, like grid layout. Maybe with an ‘auto’ value for row to keep the current behavior of stacking them within a column as in a vbox.
Not necessarily the span feature but the possibility to define row and column like in grid layout, look at the design and result picures below, you will see I use padding through blank fields.
What I try to achieve is to replace the caption of a field with an option group. In the result picture you can see on two columns the ‘title’ and the ‘name’ fields aligned on the same row. In this case the captions are useless, as long as you use an option group for the title, align it on the right, and stick the name field without caption to the right of the option group. This would be self explanatory enough without captions. Moreover, as both information are bound, reading them together from left ro right is better ergonomics for the user, than reading line by line.
Same goes for ‘payment delay’ and ‘from’ on its right. Reading from left to right gives ‘payment delay of [x] days starting from {delivery,invoice,command}’. Again, both information are bound, reading them together from left ro right is far more readable for a human.
BTW, in order to completely achieve the ergonomics we try to have, I also need the possibility to align field on the right. Correct me if I’m wrong but you cannot do that in Studio.
Of course all of that can be achieved by laying myself manually individual labels & components, or by going 100% code. But field group component in Studio is a tremendous save of time. And it is so close to the level of ergonomics we try to achieve.
Maybe this is big change for the field group component. An alternative or temporary solution would be allowing the use of a component other than label for caption (in my case option group, but that could be a dropdown).
Recap of the features I suggest :
allowing to define row within column for each component of a field group (column already there)
define field and caption alignment from Studio (left or right)
allow using an arbitrary component for caption instead of label
I was trying to get rid of the caption, thinking that CubaFieldGroupLayout would not produce a Label component for my custom component, yielding what I was trying to achieve.
But no way to get rid of the caption, found the culprit in WebFieldGroup.addCustomField() method, see code snippet below.
Then I thought making an extended class of WebFieldGroup to allow no caption, but seems the framework does not allow this. I really need help guys.
if (fieldComponent instanceof HasCaption) {
HasCaption hasCaptionComponent = (HasCaption) fieldComponent;
if (StringUtils.isEmpty(hasCaptionComponent.getCaption())) {
hasCaptionComponent.setCaption(getDefaultCaption(fieldConfig, fieldDatasource));
}
For empty place holders you can use custom field with empty Label component and caption set to " ".
I agree with you that we need more flexible FieldGroup component. We are planning to introduce align for captions and normal empty caption handling in one of the next minor releases along with improvements for positioning of components.
Could you develop a bit your 3rd point ? I did not find a way to have an empty Label component as you suggest. This is what I tried with the code below, but correct me if I’m wrong, every Field in the framework implements HasCaption, hence the FieldGroup layout creates a cell for the Label anyway.
Or maybe are you suggesting to create a custom Vaadin field without label and add it in Studio ? If that’s the case we might rather wait for a minor release.
For custom field you can reset caption after adding field implementation:
// after addCustomField
customerFieldGroup.setFieldCaption("name", "");
Caption will disappear, but please note that “” and null have different meaning. In case of null caption your field can allocate space in the captions column. In case of “” caption simply will be empty string and field cannot allocate space of a caption.
See the following issue in our bug tracker: