How to filter a grid with a lookup drop down box

I’m looking to do 2 things and cants seem to find an example of them.

  1. choose an item in a drop down , say an account, and filter a grid of related items to those only related to that account.

  2. choose an item from a drop down lookup and show details in fields on the screen relating to that selection.

Thanks,

Josh

Hello, Josh.

There two ways to filter items in table according to value in LookupField, depending on your needs:

  1. Add nested filter element to a collection datasource query. For example:

<collectionDatasource id="ordersDs"
                              class="com.company.demo.entity.Order"
                              view="order-browse">
  <query>
    <![CDATA[select e from demo$Order e]]>
    <filter>
      <and>
        <c>e.customer.id = :component$customerField</c>
      </and>
    </filter>
  </query>
</collectionDatasource>

In this case, if no value is selected in the lookupField, then no filtering will be applied.

  1. Add where condition directly to a collection datasource query. For example:

<collectionDatasource id="ordersDs"
                              class="com.company.demo.entity.Order"
                              view="order-browse">
  <query>
    <![CDATA[select e from demo$Order e where e.customer.id = :component$customerField]]>
  </query>
</collectionDatasource>

In this case, if no value is selected in lookupField, then a table will be empty.

In the screen controller, you need to inject the lookupField and add a ValueChangeListener to refresh datasource every time the value of lookupField has changed.


@Inject
protected LookupField customerField;
@Inject
protected CollectionDatasource<Order, UUID> ordersDs;

@Override
public void init(Map<String, Object> params) {
   customerField.addValueChangeListener(e -> {
    ordersDs.refresh();
  });
}

To show detailed information relating to lookupField value you need to add a ValueChangeListener to lookupField and change your UI any way you want, depending on a value received in a listener. For example, in my case, I added a datasource and a fieldGorup associated with it. In the ValueChangeListener I update an item of that datasource relative to the lookupField value.

XML


...
<dsContext>
...
  <datasource id="customerDs"
                            class="com.company.demo.entity.Customer"
                            view="_local"></datasource>
...
</dsContext>
...
<fieldGroup id="fieldGroup"
                         editable="false"
                         datasource="customerDs">
  <column width="250px">
    <field id="name"></field>
    <field id="lastName"></field>
    <field id="age"></field>
    <field id="active"></field>
    <field id="grade"></field>
  </column>
</fieldGroup>
...

Controller


@Inject
protected LookupField customerField;
@Inject
    protected Datasource<Customer> customerDs;

@Override
public void init(Map<String, Object> params) {
   customerField.addValueChangeListener(e -> {
    customerDs.setItem((Customer) e.getValue());
  });
}

You can see the full demo project at github.

Regards,

Gleb