Async loading of fields
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:
- From the select the user selects type "MetaData"
- Next to the select a async search input will be presented to browse the available MetaData on the server
- The user selects a MetaData
Is this doable with this library?
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?
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.
Update: I overwrote the
SelectFieldusing the config. Now I'm able to query for availableMetaDatavia an autoAutocompleteField. However, I don't see any way to dynamically update theConfigfrom 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.
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
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?