Filter widget without the button and a few custom fields

Hi.
Id like to do a filter with just a few fields without any customization buttons or any of the extra features that the filter widget provides. I found the filter that i need in the roles page… how can I do this and hide these extra things and disable the collapsing to have a thin vbox with a row of 3 fields to filter.

image

filtering like in the role screen is what I need
image

Thank you !!

Hello,

You can filter data items without the Filter component. Set to the data loader query and corresponding parameters:

<hbox spacing="true">
    <label id="filterNameLabel"
           align="MIDDLE_CENTER"
           value="Name"/>
    <textField id="filterNameField"/>
</hbox>
@Inject
private CollectionLoader<Good> goodsDl;

@Subscribe("filterNameField")
public void onFilterNameFieldValueChange(HasValue.ValueChangeEvent<String> event) {
    String name = event.getValue();
    if (Strings.isNullOrEmpty(name)) {
        goodsDl.setQuery("select e from emo_Good e");
        goodsDl.removeParameter("name");
    } else {
        goodsDl.setQuery("select e from demo_Good e where e.name like :name");
        goodsDl.setParameter("name", "%" + name + "%");
    }
    goodsDl.load();
}

Also, see more declarative way to make similar filter in the documentation.

Thank you so much for your response… Ive had success with one parameter… but in some cases I can have up to 8 filtering fields. How could I manage this?

Without Filter component you have to create 8 fields. I think it is better to use “condition” in the XML:

        <collection id="customersDc"
                    class="com.company.demo.entity.Customer" view="_local">
            <loader id="customersDl">
                <query><![CDATA[select e from demo_Customer e]]>
                    <condition> 
                        <and> 
                            <c:jpql> 
                                <c:where>e.name like :name</c:where>
                            </c:jpql>
                            <c:jpql>
                                <c:where>e.status = :status</c:where>
                            </c:jpql>
                        </and>
                    </condition>
                </query>
            </loader>
        </collection>

and listen ValueChangeEvent from fields like in the documentation link above. In this case, you don’t need to modify the query, as documentation says:

… a condition is included in the query only when its parameters are set. So the resulting query executed on the database will depend on what is entered in the UI components:

Only nameFilterField has a value

select e from demo_Customer e where e.name like :name

Only statusFilterField has a value

select e from demo_Customer e where e.status = :status

Both nameFilterField and statusFilterField have values

select e from demo_Customer e where (e.name like :name) and (e.status = :status)