react-awesome-query-builder icon indicating copy to clipboard operation
react-awesome-query-builder copied to clipboard

Async loading of fields

Open alfechner opened this issue 5 years ago • 5 comments

I have MetaData entries stored on my server. MetaData identifies a value in the database, it's doesn't contain the value itself. A MetaData object holds a DataType, i.e. StringDataType, IntegerDataType.

I want my user to be able to create a query based on a MetaData entry. The available operators shall be based on the DataType.

As far as I understand this is perfectly doable with react-awesome-query-builder as long as I know the list of available MetaData objects beforehand.

In my use case there are a lot. I want my user to be able to do the following:

  1. From the select the user selects type "MetaData"
  2. Next to the select a async search input will be presented to browse the available MetaData on the server
  3. The user selects a MetaData

Is this doable with this library?

alfechner avatar Mar 25 '20 06:03 alfechner

To continue on that: I basically need a way to dynamically add rule fields to the configuration. To my understanding the rule operators and rule values can be customized via the configuration.

Is it currently supported/possible to override/replace the select with i.e. an auto complete?

alfechner avatar Jun 23 '20 06:06 alfechner

Update: I overwrote the SelectField using the config. Now I'm able to query for available MetaData via an auto AutocompleteField. However, I don't see any way to dynamically update the Config from here. Any advice would be highly appreciated.

alfechner avatar Jun 23 '20 13:06 alfechner

Update: I overwrote the SelectField using the config. Now I'm able to query for available MetaData via an auto AutocompleteField. However, I don't see any way to dynamically update the Config from here. Any advice would be highly appreciated.

might be a late replay.

but my fix was to create a new component widget that i return in the factory.

group_select: { ...BasicConfig.widgets.select, factory: ({ value, setValue, allowCustomValues, readonly, placeholder, customProps }) => { const onChange = (e, data) => { setValue(data?.value?.value || ""); }; return <GroupPicker readonly={readonly} label={placeholder} selectedValue={value} onChange={onChange} />; }, },

and internally in that component i call the api and fetch the data only set the value inside the component.

the most elegant way without modifying any thing internally in the tool also without the need to reset the state for the config to load all the data.

A-Ghorab avatar Jan 19 '21 17:01 A-Ghorab

Async fetch with server-side autocomplete is now supported for MUI. See: asyncFetch, useAsyncSearch, useLoadMore in config: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc https://github.com/ukrbublik/react-awesome-query-builder/blob/bf7ac0a31b271ef46fd491cc75cd15c770aee4f4/examples/demo/config.tsx#L536-L545

ukrbublik avatar Oct 06 '21 00:10 ukrbublik

Hello there! Any updates here? I have to create a dynamic filter constructor and this feature with asynchronous configuration can help me wery well Maybe @alfechner solved it by another method?

cruperman avatar Oct 11 '23 11:10 cruperman