Tuesday, August 18, 2015

Smart Combo Box LOV with Filter

Combo box LOV with filtering is simple, but effective feature not used often. You should rethink LOV design and apply combo box LOV with filtering where possible. Advantage of such LOV implementation is pretty clear - fast list items access, based on filter criteria. This will reduce number of times required to open LOV popup and improve performance of UI.

LOV VO should implement View Criteria, returning top items to be included into choice list. My example retrieves all jobs with minimum salary greater or equal than 10000. Users will see list items based on this criteria first:


I would recommend to use List UI Hints section of the LOV VO to define LOV UI definition. This will save time when assigning LOV for the attributes, do it once and reuse. I have specified Combo box LOV with filtering based on View Criteria - to include jobs with minimum salary greater than 10000 into initial choice list:


Time is saved when assigning LOV for the attribute - UI Hints are automatically set, based on LOV UI Hints definition:


This is how it looks on UI. Top records are displayed in the choice list, based on applied filter criteria.  All list items can be accessed through More... option:


This is how LOV popup looks by default in ADF 12c. Height is stretched automatically to occupy all possible display height, width is not stretched. Such layout is not good, users don't like it:


LOV popup can be made stretchable with little help of ADF UI CSS. We should use -tr-stretch-search-dialog CSS property to enable LOV popup stretching in ADF 12c (CSS sample is provided with example):


Another important thing to remember about LOV's in ADF 12c - List Range Size property. By default it is being set to -1. This is OK for simple choice lists, where you would like to show all data at once. But not suitable for LOV or combo with LOV, where we don't want to fetch all LOV items at first load:


I would set it to 10, this will populate only visible set of LOV records:


Take a look, how LOV popup window will look after improvements applied - it is stretchable by the user and only initial set of list item records is fetched:


Make sure to use combo LOV with initial filter criteria, to optimise LOV behaviour. Download sample application - SmartComboLOV.zip.

13 comments:

Anonymous said...

Great Post as usual..
But how i can pass dynamic value instead of 10000 ?

Thank you .

wass

Andrej Baranovskij said...

This is easy. Initialise bind variable by calling setter or any other option like executeWithParams, etc.

Regards,
Andrejus

Archyvas said...

Dear Andrejus,

Is it possible to use this LOV in ADF table, not only ADF form?

Andrej Baranovskij said...

Yes, it should work in ADF table in same way as in form.

Regards,
Andrejus

Archyvas said...

Dear Andrejus,

When switching from "Choice List" to "Combo Box with List of Values" default list type, it seems like my selected display attribute is ignored...

Conf: https://www.dropbox.com/s/alud4go1mxnwpw8/Capture2.PNG?dl=0
Result: https://www.dropbox.com/s/2u4z0f6f05ymsuq/Capture.PNG?dl=0

Other than that, your Smart Combo Box LOV would be great choice.

Maybe you have an idea how could I solve this display attribute issue so I could show 'Pavadinimas'?

Andrej Baranovskij said...

Normally it works OK. I will take a look into your use case later this week.

Regards,
Andrejus

Archyvas said...

I will look into this, thank you!

Andrej Baranovskij said...

I didnt had chance to test it yet, but its on my todo list.

Regards,
Andrejus

Archyvas said...

Hi Andrejus,

I've managed to solve this problem in a similar way like Sireesha has suggested in her blog:
https://blogs.oracle.com/adf/entry/combo_lov_how_to_display

Instead of groovy expression I've altered get method for this transient attribute.

Andrej Baranovskij said...

This is default behaviour of combo LOV to display key attribute, with some work. I thought you are asking about combo LOV in table.

There is a way to implement same without groovy and transient attribute. I will describe, in future posts.

Regards,
Andrejus

Andrej Baranovskij said...

Hi Paulius,

Please check new post on the same topic: http://andrejusb.blogspot.dk/2015/09/smart-combo-box-lov-based-on.html

Regards,
Andrejus

Unknown said...

Hello Andrejus
Thank you for the great post
I tried to use combo LOV in search panel (drop a search view to create a query panel) and it doesn't work. It doesn't have more button to show the search popup.
Do you have any hint for this ?
Thank you very much
Dat

luis said...

Hi, I want create a view criteria and i've created a LOV field, but the af:query does´t show the LOV. Only show LOV if I use the default view criteria. How can I solve it?
Thanks and regards