27
Views
11
Comments
React - Search combobox with thousands of records
Question
Application Type
Reactive

In a React application, when Outsystems generates the screen automatically and there is a related table record, it uses the combobox component to make the selection.

In tables with few records this is not a problem.

In the case of having thousands of records, what better way to make the selection? If I put a Search combobox, it doesn't bring all the records in the autocomplete.

It is a screen to record sales, where the fields "Customer", "Supplier", "Product" and many others, have thousands of records.

What is the recommendation for this scenario?

Hi,

For those scenarios the dropdown search is the solution I would go for. 

If you say it doesn't bring all the records is probably because you are not fetching all the records in the aggregate that feeds the dropdown search. Make sure you don't have a low max records value defined in that aggregate (I believe the default is 50).

Hope this helps,

Pedro

UserImage.jpg
Cleiton Giovanni Moretti - KeepOK Consultoria LTDA.

Yes.. I can change the maximum number of records, but because they are tables with thousands of records, is this not a problem for the application (overhead)?

 That’s possible yes. One thing that you can do is implement some logic and only fetch records after the user inputs 3 characters (for example, you can adjust this number). This way you keep the number of records fetched to a minimum

UserImage.jpg
Cleiton Giovanni Moretti - KeepOK Consultoria LTDA.

I thought about doing this, but not being able to get the value typed in the field ( dropdown search ) to assign to a filter variable. Do you know if it's possible?

I was looking at it and you're right, you can't build that logic with the DropdownSearch but you can use this forge component that allows for lazy loading https://www.outsystems.com/forge/component-overview/7754/lazydropdownsearch

Let me know if this helps,

Pedro

Or… you can build your own dropdown :) but yeah, you can’t do that with the DropdownSearch because the filter is done through JS, my bad

UserImage.jpg
Cleiton Giovanni Moretti - KeepOK Consultoria LTDA.

I tested this component. The only problem I found was that when I load a form with data already saved, I couldn't get it to fill in correctly.

If no one from the Outsystems community suggests another way, I'll give it a go.

Thank you very much. I'll let you know when I'm successful.

The component has a field called “SelectedItem” that you can use to achieve that.

UserImage.jpg
Cleiton Giovanni Moretti - KeepOK Consultoria LTDA.

After saving and reloading the form, even with the SelectedItem field filled, the data is not loaded :(

hiii

when you create aggregate with all entities then you can use filter of  records as you want and also you can put the max record hard cord value your screen visible only those records as u need ...

UserImage.jpg
Cleiton Giovanni Moretti - KeepOK Consultoria LTDA.

Today I already limit the number of records, but I want to use DropdownSearch, and get the content that is being typed, and with each new letter, change the filter variable of the aggregate to filter the data.

It turns out that I'm not able to get the content typed in DropdownSearch. Is it possible to do that?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.