valuePicker displays a value of any type. It consists of the text field and the set of buttons defined by actions.

  • XML element: valuePicker

  • Java class: JmixValuePicker


valuePicker can have a label and both custom and predefined actions:

value picker basic

An example of defining valuePicker with a label retrieved from localized messages, and two actions:

<valuePicker id="valuePicker" label="Code">
        <action id="generate" icon="REFRESH"/>
        <action id="valueClear" type="value_clear"/>

To create valuePicker connected to data, use the dataContainer and property attributes:

    <instance class="" id="stepDc">
        <fetchPlan extends="_base"/>
        <loader id="stepDl"/>
    <valuePicker dataContainer="stepDc"
            <action id="valueClear" type="value_clear"/>

In the example above, the view defines the stepDc data container for the Step entity with the name attribute. The valuePicker component has a link to the container specified in the dataContainer attribute; the property attribute contains the name of the entity attribute that is displayed in valuePicker.


You can define custom and predefined actions for valuePicker 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 only one predefined action - value_clear:

<action id="valueClear" type="value_clear"/>

Use the type and id attributes for declaring predefined action in XML.

Use addAction() to set it programmatically:

private JmixValuePicker<String> loginValuePicker;

private Actions actions;

public void onInit(InitEvent event) {

Custom Actions

To define a custom action in XML, use the actions nested element. Specify the id and icon attributes for the action:

<valuePicker id="generateLoginPicker" label="Login">
        <action id="valueClear" type="value_clear"/>
        <action id="generate" icon="REFRESH"/>

Then implement a custom logic in the screen controller by subscribing to ActionPerformedEvent:

private JmixValuePicker<String> generateLoginPicker;

public void onGenerateLoginPickerGenerate(ActionPerformedEvent event) {
    generateLoginPicker.setValue(RandomStringUtils.randomAlphabetic(5, 10));



By default, a user cannot input the value manually. If you set the allowCustomValue attribute to true, you enable manual input. Keep in mind that the entered value is not set to the data model. To handle user input, use CustomValueSetEvent.



io.jmix.flowui.kit.component.valuepicker.CustomValueSetEvent is fired when a user inputs value manually. To enable user input, set the allowCustomValue attribute.

private Notifications notifications;

private JmixValuePicker<String> vPicker;

public void onVPickerCustomValueSet(
        CustomValueSetEvent<JmixValuePicker<String>, Object> event) {
    String text = event.getText(); (1)
    notifications.create("Entered value: " + text)
    if (!Strings.isNullOrEmpty(text))
        vPicker.setValue(text); (2)
1 Get the user input value as String.
2 Set the value to vPicker.


Adds a formatter instance to the component.

In the example below, we will show a formatter usage for the vPicker value picker:

@Install(to = "vPicker", subject = "formatter")
private String vPickerFormatter(String value) {
    return value != null ? "Code: " + value : null;

To add formatter programmatically, use the setFormatter() component method.