Custom layout for filters

Support
#1

Hi all, I’m aiming to create a screen with a split view, In the first split I need a filter and in the second I need the data. This is simple but if i set the width of the first part to something (for example 400px) when the user adds search conditions all of them are added in one row, this is a problem for the user.
filter-problem

Is there a way to overwrite the layout of the filter or is it possible to achieve a similar result using the build in filters.

#2

Hi,

I’d recommend that you use custom filter instead of generic. It can be done using Query filter: Query Filter - CUBA Platform. Developer’s Manual

For instance, let’s implement filter by company and login with Users table:

<hbox spacing="true">
    <textField id="loginField"
               caption="Login"/>

    <lookupField id="groupField"
                 caption="Group"
                 optionsDatasource="groupsDs"/>

    <button caption="Apply"
            align="BOTTOM_LEFT"
            invoke="applyFilter"/>
</hbox>

<table id="usersTable"
       width="100%">
    <columns>
        <column id="login"/>
        <column id="name"/>
        <column id="group"/>
        <column id="position"/>
        <column id="active"/>
    </columns>
    <rows datasource="usersDs"/>
</table>

custom-filter

Table reads data from usersDs datasource:

<collectionDatasource id="usersDs"
                      class="com.haulmont.cuba.security.entity.User"
                      view="user.edit">
    <query>
        <![CDATA[select e from sec$User e]]>
        <filter>
            <and>
                <c><![CDATA[e.login = :component$loginField]]></c>
                <c><![CDATA[e.group.id = :component$groupField]]></c>
            </and>
        </filter>
    </query>
</collectionDatasource>

Here, we define filter element and declare additional conditions. Finally, apply filter on button click:

public class ExtAppMainWindow extends AppMainWindow {
    @Inject
    private CollectionDatasource<User, UUID> usersDs;

    public void applyFilter() {
        usersDs.refresh();
    }
}

Using this approach you can implement custom filter layouts in any screen / panel / etc, but you are limited with predefined conditions in datasource definition.