How to implement a lookup display field

I have the following use case. The user enters a numeric code. There are a lot of possible numeric codes. Each of the numeric codes corresponds to a text description stored in a lookup table. When the user enters the numeric code and hits enter I would want a non-editable field to the right to display the corresponding text. If the numeric code cannot be found it would show N/A.

Is this something I just need to implement with a textfield and a valuechangelistener that updates the description field, or can one of the existing lookup fields (LookupField, PickerField, LookupPickerField, SearchPickerField) be used for this purpose? The use case for all of those seems to be selecting the value based on the lookup. I just want to show the corresponding value after the user enters the code in and N/A if unavailable?


You can use either two TextField components or SearchPickerField to implement this behaviour.

Suppose that you have SparePart entity with two fields: code (Integer) and title (String).

If you want to show two TextFields then just use ValueChangeListener and DataManager to perform a search:


<hbox spacing="true">
    <textField id="searchTextField"
               caption="Search by code"></textField>
    <textField id="resultTextField"
               caption="Result SparePart"></textField>

Screen controller:

private TextField searchTextField;
private TextField resultTextField;
private DataManager dataManager;

searchTextField.addValueChangeListener(e -> {
    if (e.getValue() == null) {
    } else {
        LoadContext.Query query = new LoadContext.Query(
                "select e from demo$SparePart e where cast(e.code varchar(10)) = :code");
        query.setParameter("code", e.getValue());
        LoadContext<SparePart> loadContext = LoadContext.create(SparePart.class)

        SparePart sparePart = dataManager.load(loadContext);

        if (sparePart == null) {
        } else {

If you want to search by code in the same field that is used for displaying value then use SearchPickerField as described here:

    <collectionDatasource id="sparePartsSearchDs"
            <![CDATA[select e from demo$SparePart e where cast(e.code varchar(10)) = :custom$searchString]]>

<searchPickerField id="searchPickerField"
                   caption="Search by code and set to field"

I’ve created a simple project that illustrates these two approaches:


Thx. This was very helpful.