Multi tool use

FormLayout: 1 caption for 2 fields

I have a view containing a FormLayout.

FormLayout

I want this layout to contains 2 columns: one with the captions, and the 2nd one with the input fields.
My fields are all marked as required so all captions display the small red indicator on there right side (and no indicator on the input fields).

My issue is that one of my input is a date and a time. I have to display those 2 fields on a single line, with a single caption.

I can easily set the 2 components side by side with a caption by putting both in an HorizontalLayout and setting the caption on the layout. But this set the required indicator not on the caption but on each input fields.

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField = new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");

form.addComponent(blocDateTime);


Here is a picture of what I get (A), versus what I want (B):

I could get what I want by setting a custom validator on those field, checking if their value is empty and setting a style on the caption but I wonder if there is a more "standard" way to do that.

2 Answers
2

Since you want only one required indicator (the red asterix), that dictates that you want to have only one field per line.

That means that you should create a CustomField that combines the PopupDateField and TextField into one.

CustomField

You can create the one object of span type of component and add your date field and time field into span object and then add than span object into form layout object..
Your code will look like as:

FormLayout bloc = new FormLayout();

Span dateTimeBox = new Span();
PopupDateField dateField = new PopupDateField();
TextField timeField = new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
dateTimeBox.addComponent(dateField);
dateTimeBox.addComponent(timeField);
blocDateTime.add(dateTimeBox);
blocDateTime.setCaption("caption.dateTime");


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.