How to filter a grid with a lookup drop down box

Support
#1

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

#2

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