Suggestion : make easier to create blank fields in fieldgroup (or grid them)

Hi

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.

Mike

Hi,

Thank you for the idea, I have a couple of questions:

  1. Do you mean column span / row span feature from GridLayout ?
  2. Could you share an image that illustrates result layout on screen ?

Hi Yuriy

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

If you see better solutions, do not hesitate.

Design

Result

field_group_grid

field_group_grid_design

I have managed to get something close to what we want with the following custom code.

Code


        customerFieldGroup.addCustomField("name", (datasource, propertyId) -> {
            HBoxLayout layout = factory.createComponent(HBoxLayout.class);
            OptionsGroup title = factory.createComponent(OptionsGroup.class);
            title.setDatasource(customerFieldGroup.getDatasource(), "title");
            title.setCaption(null);
            title.setOrientation(OptionsGroup.Orientation.HORIZONTAL);
            title.setAlignment(Alignment.MIDDLE_LEFT);
            TextField name = factory.createComponent(TextField.class);
            name.setDatasource(customerFieldGroup.getDatasource(), "name");
            name.setCaption(null);
            layout.setAlignment(Alignment.MIDDLE_LEFT);
            layout.setCaption(null);
            layout.add(title);
            layout.add(name);
            return layout;
        });

Result

As you can see below, field group layout is still reserving space for a caption on the left so it does not work.

With another test, we are getting closer using the following code :


customerFieldGroup.setCaptionAlignment(FieldGroup.FieldCaptionAlignment.TOP);

Two issues :

  • caption positioning changed to TOP for all fields, we would like being able to do it field by field
  • even with code settting a caption to null (tried empty string) there is still a caption

Conclusion : we really need to be able to customize the component used by field group for caption.

I’m still exploring a way to extend WebFieldGroup to have control on the Label component use for caption, but this might get complicated.

Mike

title_name_custom

title_name_custom_still_has_caption

title_name_custom_still_has_caption_top

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));
    }

Hi,

  1. If you want to simply have empty caption you can set it to " " - one space symbol value. That will do the trick.

  2. If you want to use right align for captions, it can be done using CSS:


.caption-align-right .v-caption {
    text-align: right;
}

<fieldGroup id="fieldGroup"
            datasource="clientDs" 
            stylename="caption-align-right">
    <column width="250px">
        <field id="title"/>
        <field id="description"/>
    </column>
</fieldGroup>

You can read about extending CSS theme here: https://doc.cuba-platform.com/manual-6.4/web_theme_extension.html

  1. 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.

Thank you for your observation!

Thanks for the tips Yuriy.

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.


customerFieldGroup.addCustomField("name", (datasource, propertyId) -> {
            HBoxLayout layout = factory.createComponent(HBoxLayout.class);
            OptionsGroup title = factory.createComponent(OptionsGroup.class);
            title.setDatasource(customerFieldGroup.getDatasource(), "title");
            title.setCaption(null);
            title.setOrientation(OptionsGroup.Orientation.HORIZONTAL);
            title.setAlignment(Alignment.MIDDLE_LEFT);
            TextField name = factory.createComponent(TextField.class);
            name.setDatasource(customerFieldGroup.getDatasource(), "name");
            name.setCaption("");
            layout.setAlignment(Alignment.MIDDLE_LEFT);
            layout.setCaption("");
            layout.add(title);
            layout.add(name);
            return layout;
        });

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.

I did try with no chance.

Code


        customerFieldGroup.addCustomField("name", (datasource, propertyId) -> {
            HBoxLayout layout = factory.createComponent(HBoxLayout.class);
            OptionsGroup title = factory.createComponent(OptionsGroup.class);
            title.setDatasource(customerFieldGroup.getDatasource(), "title");
            title.setCaption(null);
            title.setOrientation(OptionsGroup.Orientation.HORIZONTAL);
            title.setAlignment(Alignment.MIDDLE_LEFT);
            TextField name = factory.createComponent(TextField.class);
            name.setDatasource(customerFieldGroup.getDatasource(), "name");
            name.setWidth("100%");
            name.setCaption(null);
            layout.setAlignment(Alignment.MIDDLE_LEFT);
            layout.setCaption("");
            layout.add(title);
            layout.add(name);
            return layout;
        });
        customerFieldGroup.setFieldCaption("name", "");

Layout cell for caption is still there

As it can be seen in html

title_name_custom_still_has_caption_empty_string

title_name_custom_still_has_caption_empty_string_html

> In case of null caption your field can allocate space in the captions column

So, if you want to use this behaviour, call:


customerFieldGroup.setFieldCaption("name", null);

And no need to set caption for layout in your custom field generator, it will be overridden.

It works ! Thanks Yuriy.

I think this should be clarified in the documentation :

  • setting null caption on a classic component will create a default caption based on id
  • setting null caption on a custom component will remove it completely

We also should be able to have a true null caption for a classic component as well.

Thank you for your time, we definitely will change this tricky API in the future.

You can reset caption for declarative field using the same approach from init method of a screen controller. Just call FieldGroup.setFieldCaption.

Great, did not check yet but I trust you. Thanks Yuriy.

:ticket: See the following issue in our bug tracker:

https://youtrack.cuba-platform.com/issue/PL-8905