Generic Filter - Change width of fields

Support
#1

Hi Jmix Team,

We are using JMIX v2.5.1 in our project, we want to reduce/increase the width of the fields in the Generic filter.

We tried to use responsive steps and colspan as described in the code below

         <genericFilter id="genericFilter"
                   dataLoader="vwComaJmixCcaaValidacionRetribMediaEnteSecPersDl">
        <configurations>
            <configuration id="DefaultConfiguration" name="Default" default="true">

                <propertyFilter property="ejercicioEnteca"
                                parameterName="ejercicio"
                                operation="EQUAL"
                                operationEditable="true"
                                label="Ejercicio" colspan="1"/>
                <propertyFilter property="periodoEnteca"
                                parameterName="periodo"
                                operation="EQUAL"
                                operationEditable="true"
                                label="Periodo" colspan="1"/>
                <propertyFilter property="codComunidad"
                                parameterName="codComunidad"
                                operation="IN_LIST"
                                operationEditable="true"
                                label="CCAA" colspan="3" >
                    <multiSelectComboBoxPicker id="comaComunidadsPicker" itemsContainer="comaComunidadsDc"
                                               metaClass="ComaComunidad">
                        <actions>
                            <action id="entityClear" type="entity_clear"/>
                        </actions>
                    </multiSelectComboBoxPicker>
                </propertyFilter>
            </configuration>
        </configurations>
        <responsiveSteps>
            <responsiveStep minWidth="20em" columns="1"/>
            <responsiveStep minWidth="40em" columns="1" labelsPosition="ASIDE"/>
            <responsiveStep minWidth="60em" columns="6"/>
        </responsiveSteps>
    </genericFilter>

But responsive steps works perfectly fine inside formLayout but i am not able to make it work in the generic filter, there is also no option to adjust width or maxwitdth for these fields,

¿Is there any way to adjust the width of the fields in the Generic filter?

#5

Hi!

I tried to apply responsiveSteps to the genericFilter component and it worked. I couldn’t reproduce your problem.

Could you describe in more detail what exactly is not working? Maybe provide screenshots?

Also, if you could provide a small test project that reproduces the problem, it would be very helpful.

Best regards,
Dmitriy

#6

Hi Dmitriy, I think i could not explain correctly my question, the responsive steps is working fine in the generic filter, but all fields are the same width, is there any way to make one of the field widther than the others.

Currently the screen is displayed like this

image

I would like to make the first two fields narrower and the last one widther. Like the example below i created changing the image in Paint.
image

Is there any way to do this?

#7

Hi!

Thank you for your detailed explanation.

The only way I found was to set colspan on the required form item on configurationChangeEvent or configurationRefreshEvent depending on which one suits you better.

Please find code snippet below:

    @Subscribe("genericFilter")
    public void onGenericFilterConfigurationRefresh(final GenericFilter.ConfigurationRefreshEvent event) {
        LogicalFilterComponent<?> rootFilterComponent = event.getUpdatedConfiguration().getRootLogicalFilterComponent();

        //or other logic to find the component's formItem
        Component namePropertyFilterWrapper = rootFilterComponent.getOwnFilterComponents().stream()
                .filter(filterComponent -> filterComponent instanceof PropertyFilter<?>)
                .map(filterComponent -> ((PropertyFilter<?>) filterComponent))
                .filter(filterComponent -> "username".equals(filterComponent.getProperty()))    // my property filter
                .findAny()
                .orElseThrow()
                .getParent() // its parent component -> corresponding `formItem`
                .orElseThrow();

        // FormLayout inside generic filter component
        FormLayout formLayout = (FormLayout) ((GroupFilter) rootFilterComponent).getContent().getComponentAt(0);
        formLayout.setColspan(namePropertyFilterWrapper, 2);
    }

image
I hope this answer will be useful to you.

Best regards,
Dmitriy