How to implement a lookup display field

Support
#1

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?

#2

Hi,

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:

XML:


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

Screen controller:


@Inject
private TextField searchTextField;
@Inject
private TextField resultTextField;
@Inject
private DataManager dataManager;
...

searchTextField.addValueChangeListener(e -> {
    if (e.getValue() == null) {
        resultTextField.setValue("N/A");
    } 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)
                .setQuery(query);

        SparePart sparePart = dataManager.load(loadContext);

        if (sparePart == null) {
            resultTextField.setValue("N/A");
        } else {
            resultTextField.setValue(sparePart);
        }
    }
});

If you want to search by code in the same field that is used for displaying value then use SearchPickerField as described here: SearchPickerField - CUBA Platform. Developer’s Manual


<dsContext>
    <collectionDatasource id="sparePartsSearchDs"
                          class="com.company.demo.entity.SparePart"
                          view="_local">
        <query>
            <![CDATA[select e from demo$SparePart e where cast(e.code varchar(10)) = :custom$searchString]]>
        </query>
    </collectionDatasource>
</dsContext>

<searchPickerField id="searchPickerField"
                   caption="Search by code and set to field"
                   optionsDatasource="sparePartsSearchDs"></searchPickerField>

I’ve created a simple project that illustrates these two approaches: GitHub - cuba-labs/search-by-code

search-fields

#3

Thx. This was very helpful.