multiValuePicker

LIVE DEMO

multiValuePicker works with a list of values of any type. It consists of the text field and the set of buttons defined by actions.

multiValuePicker is convenient to use if you need to edit the list of values through actions, not in the text field.

  • XML element: multiValuePicker

  • Java class: JmixMultiValuePicker

Basics

Basic multiValuePicker example:

<multiValuePicker id="stringsValuesPicker" label="Favourite colors">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.String"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

When the user clicks on the value selection button, the Select Value screen appears. The user can create and add some value to a result list on this screen or remove a value from the list. The user can add a value either by clicking the Add button or by pressing Enter.

multi value picker

Actions

You can define custom and predefined actions for multiValuePicker displayed as buttons on the right. You can do it either in the XML descriptor using the actions nested element or programmatically in the controller using the addAction() method.

To add action in Jmix Studio, select the component in the screen descriptor XML or in the Jmix UI structure panel and click on the Add button in the Jmix UI inspector panel.

Predefined Action

The framework provides value_clear and multi_value_select predefined actions.

The multi_value_select action sets a value to multiValuePicker using a value selection screen. The value selection screen generates a specific component to select or create a value depending on the passed value type. The multi_value_select action can be used to select any type of value, for example:

  • Java types, like String, Integer, Long, Double, BigDecimal, Date, LocalDate, LocalTime, LocalDateTime, OffsetTime, OffsetDateTime, Date, Time, UUID and java.sql.Date, java.sql.Time.

    Use the javaClass property to set the Java class used as the type of selected value.

    In the previous example, the multi_value_select action uses the java.lang.String Java type.

  • Enum values

    Use the enumClass property to set the enumeration class used as the type of selected value.

    <multiValuePicker id="enumValuesPicker" label="Onboarding statuses">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="enumClass"
                          value="com.company.onboarding.entity.OnboardingStatus"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

    For enum values, comboBox is generated on the Select Value screen.

  • Entity instances

    Use the entityName property to set the entity name used as the type of selected value.

    <multiValuePicker id="entityValuesPicker" label="Departments">
    <actions>
        <action id="multiValueSelect" type="multi_value_select">
            <properties>
                <property name="entityName" value="Department"/>
                <property name="useComboBox" value="true"/>
            </properties>
        </action>
        <action id="valueClear" type="value_clear"/>
    </actions>
</multiValuePicker>

    The useComboBox property specifies whether entityComboBox should be used in the value selection screen. The default value is false.

Custom Actions

Custom actions for multiValuePicker are similar to custom actions for valuePicker.

Attributes

id - alignSelf - allowCustomValue - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - height - helperText - invalid - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredIndicatorVisible - requiredMessage - tabIndex - themeNames - title - visible - width

Handlers

AttachEvent - BlurEvent - ComponentValueChangeEvent - CustomValueSetEvent - DetachEvent - FocusEvent - formatter - statusChangeHandler - validator

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

Elements

actions - formatter - tooltip - validator