Equivalent of Jmix 1.x form/column in Jmix 2.x: How to create multi-column forms with automatic labels?

Support
#1

Hello colleagues,

In Jmix 1.x, we could easily create multi-column forms using the form component with nested column elements, which automatically pulled labels from messages:

<form>
    <column>
        <textField property="firstName"/> <!-- Лейбл автоматически подтягивался из messages -->
    </column>
</form>

In Jmix 2.x (Flow UI), the form/column components are no longer available. I’ve tried using vbox, but encountered an issue:

  • Fields with property inside vbox don’t automatically populate labels from messages.properties, requiring manual label definitions:
<vbox>
    <textField property="firstName" label="msg://firstName"/> <!-- Дублирование кода -->
</vbox>

Questions:

  1. Is there a Jmix 2.x equivalent of the 1.x form/column functionality with automatic label population?
  2. What are the best practices for creating multi-column forms in Flow UI without duplicating label definitions?
#2

Hi, @sharifullin_a

Have a look at formLayout component.
This component can be linked to instanceContainer and its children to the entity properties. (see example).

Also it is possible to declare multiple columns using responsiveSteps declaration (see example).

Regards,
Maria.

#3

Yes, I’m currently using formLayout, but when used as-is, it automatically adjusts the columns. I would like to have fixed columns that don’t change dynamically.

Here’s how I’m implementing it now:

<formLayout id="form" dataContainer="userDc">
            <vbox>
             <textField id="usernameField"
                           label="msg://test.ui.entity/User.username"
                           property="username"
                           readOnly="true"
                           width="100%"/>
                <passwordField id="passwordField"
                               label="msg://test.ui.entity/User.password"
                               required="true"
                               visible="false"
                               width="100%">
                </passwordField>
                <passwordField id="confirmPasswordField"
                               label="msg://confirmPassword"
                               required="true"
                               visible="false"
                               width="100%"/>
                <valuePicker id="roleAssignmentField"
                             label="msg://test.ui.entity/roleAssignment.label"
                             required="true"
                             width="100%">
                </valuePicker>
            </vbox>
             <vbox>
                <textField id="firstNameField"
                           label="msg://test.ui.entity/User.firstName"
                           property="firstName"
                           width="100%"/>
                <textField id="lastNameField"
                           label="msg://test.ui.entity/User.lastName"
                           property="lastName"
                           width="100%"/>
            </vbox>
</formLayout>
``
#4

You can specify the number of columns using <responsiveSteps>, but not the contents of the columns without using additional containers like vbox in your example.

You can find more details about formLayout if the Vaadin docs.