valuePicker

LIVE DEMO

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

Basics

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">
    <actions>
        <action id="generate" icon="REFRESH"/>
        <action id="valueClear" type="value_clear"/>
    </actions>
</valuePicker>

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

<data>
    <instance class="com.company.onboarding.entity.Step" id="stepDc">
        <fetchPlan extends="_base"/>
        <loader id="stepDl"/>
    </instance>
</data>
<layout>
    <valuePicker dataContainer="stepDc"
                 property="name"
                 label="msg://com.company.onboarding.entity/Step.name">
        <actions>
            <action id="valueClear" type="value_clear"/>
        </actions>
    </valuePicker>
</layout>

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.

Actions

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:

@ViewComponent
private JmixValuePicker<String> loginValuePicker;

@Autowired
private Actions actions;

@Subscribe
public void onInit(InitEvent event) {
    loginValuePicker.addAction(actions.create(ValueClearAction.ID));
}

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">
    <actions>
        <action id="valueClear" type="value_clear"/>
        <action id="generate" icon="REFRESH"/>
    </actions>
</valuePicker>

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

@ViewComponent
private JmixValuePicker<String> generateLoginPicker;

@Subscribe("generateLoginPicker.generate")
public void onGenerateLoginPickerGenerate(ActionPerformedEvent event) {
    generateLoginPicker.setValue(RandomStringUtils.randomAlphabetic(5, 10));
}

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

allowCustomValue

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.

Handlers

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

CustomValueSetEvent

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

@Autowired
private Notifications notifications;

@ViewComponent
private JmixValuePicker<String> vPicker;

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

formatter

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.

Elements

actions - formatter - tooltip - validator