I'm using ReferenceArrayInput React Admin.
However, there is issue for me when I selected item from suggestion items that is returned from API getList(). ex:/product?region_id="VN".
Then React Admin auto call API GetMany() with list id, ex: /products?id=1 to get detail item info.
How can customize filter for above API, such as: /products?id=1®ion_id="VN" instead
because some product info such as: price, qty,... base on region.
<ReferenceArrayInput
label="Products"
source="product_ids"
reference="products"
allowEmpty={false}
filter={{region_id: record?.region_id}}
fullWidth
filterToQuery={searchText => ({
q: searchText,
})}
>
<AutocompleteArrayInput optionText={optionProductRenderer} validate={required()}/>
</ReferenceArrayInput>
Related
we getting only certain list of values through api and mapping to Itags,
we need to get the next set of items by making an api call. we have used onGetMoreResults(), but this function is not getting triggered. is there a way to achieve this scenarios
<TagPicker
removeButtonAriaLabel='Remove'
selectionAriaLabel='Selected colors'
componentRef={picker}
onResolveSuggestions={filterSelectedTags}
onItemSelected={onItemSelected}
getTextFromItem={getTextFromItem}
pickerSuggestionsProps={pickerSuggestionsProps}
disabled={tagPicker}
inputProps={{
...inputProps,
id: 'picker2',
}}
onEmptyInputFocus={(tagList) => onEmptyInputFocus('', tagList, props.tags)}
onGetMoreResults={getMoreItems}
/>
const getMoreItems = (_filter: string, _selectedItems?: ITag[]): ITag[] => {
//make api call
}
I am using SwipeListView for Listing with Swipe options
I need to sort the list of Items ascending/descending
Sorting functions are done but the list is not refresh
const [productSortList, setProductSortList] = useState(productArraylist);
productArraylist -> main array list from api
productSortList -> temporary array list to store sorting data
<SwipeListView
//useFlatList={true}
ListEmptyComponent={FlatlistEmpty()}
showsVerticalScrollIndicator={false}
// useNativeDriver={false}
keyExtractor={(item, index) => item.id}
data={productSortList}
renderItem={renderProduct}
renderHiddenItem={renderHiddenItem1}
// leftOpenValue={73}
rightOpenValue={-345}
previewRowKey={productSortList[0].id}
previewOpenValue={-400}
previewOpenDelay={1000}
extraData={productSortList}
// onRowDidOpen={onItemOpen}
/>
In FlatList extraData={Our List Array} will do the refresh when the data get change.
How to do with SwipeListView
Im using
"react": "^16.13.1",
"react-admin": "^3.6.0",
what I try to do is that when specific column's field(list A) is clicked, go to another List B.
for example,
List A has columns (ProductId, ProductModel, Product Version, In Stock, Out of Stock, Disposal)
if 'In stock' fields are clicked, is has to go to List B filtered by that row's product Id and status is 'In stock'.
if 'Out Of stock' fields are clicked, is has to go to List B filtered by that row's product Id and status is 'Out of stock'.
using reference fields for 'In stock' and 'Out of Stock' is not appropriate. because there is no api only for them.
and I tried with hitory.push('List B') but it just show full list of List B.
what should I do this case???
This is actually documented in the react-admin <List> component documentation, section 'Linking to a pre-filtered list' (https://marmelab.com/react-admin/List.html#linking-to-a-pre-filtered-list).
As the filter values are taken from the URL, you can link to a pre-filtered list by setting the query parameter.
For instance, if you have a list of tags, you can display a button for each category to link to the list of posts filtered by that tag:
import * as React from "react";
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
import { stringify } from 'query-string';
const LinkToRelatedProducts = ({ record }) => {
const translate = useTranslate();
return record ? (
<Button
color="primary"
component={Link}
to={{
pathname: '/posts',
search: stringify({
page: 1,
perPage: 25,
sort: 'id',
order: 'DESC',
filter: JSON.stringify({ category_id: record.id }),
}),
}}
>
All posts with the category {record.name} ;
</Button>
) : null;
};
You can use this button e.g. as a child of . You can also create a custom Menu button with that technique to link to the unfiltered list by setting the filter value to {}.
Tip: You have to pass all the query string parameters - not just filter. That’s a current limitation of react-admin.
I have a react-native list populated from firebase. I want to add a search bar on top of the app. Once I start typing, I want that list to only show results related to the search term. Its similar to this: https://www.freecodecamp.org/news/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699/
Only problem is the way my data is typed after its retrieved from firebase, its impossible to use the tutorial above to retrieve that data.
My html code is:
<Toolbar title="Hello World"/>
<Button
title="Add New"
type = "outline"
onPress={this.addItem.bind(this)}
/>
<ListView
dataSource={this.state.itemDataSource}
renderRow={this.renderRow}
/>
My Firebase retrieval code is as follows:
getItems(itemsRef) {
itemsRef.on('value', (snap) => {
let items = [];
snap.forEach((child) => {
items.push({
title: child.val().DESCRIPTION,
text: child.val().BASE,
_key: child.key
});
});
this.setState({
itemDataSource: this.state.itemDataSource.cloneWithRows(items)
});
});
}
I just don't know how to add a search bar that searches the retrieved list and displays only relevant stuff on the list as someone types a word in.
Pease help. I'm guessing the type of the data is what is causing the problem.
Results should look like this App. I built this on AppSheet:
https://www.appsheet.com/start/ab7f8d5d-1adf-4107-bdd8-f7022a1a81f8
I have some JSON data that looks like this:
{
"distance":"1",
"name":"whatever",
"listPriority":"1",
}
I'm passing this into a Flatlist:
<FlatList
key={'my-list'}
data={JSON}
renderItem={this.renderCard}
keyExtractor={(item, index) => index.toString()}
/>
What I want to do is section off the data based on list priority, so all items with a value for listPriority key of 1 would show under my section header that says "These are items for 1", and a value of listPriority key of 2 would have a section header that says "Section header 2", and so forth.
I.e. resulting in something like this:
List Priority 1
item in the list
item in the list
List Priority 2
item in the list
item in the list
List Priority 3
item in the list
item in the list
How can I get sections into my Flatlist?
Sectionlist seems to be only if you are passing in separate data sets for each manually entered section.
It would seem that you could use the SectionList component, that would give you the headers and (if you want) them being sticky, which is a nice to have behaviour.
So you just need to create an array of objects that follow the needed format for the component to work properly.
<SectionList
renderItem={({item}) => someFunctionHere(item)/<SomeComponent item={item}>}
sections={sections}
keyExtractor={(item, index) => index.toString()}
/>
Define sections to be an array of format:
[
{
title: "List priority 1",
data: [{"distance":"1", "listPriority": "1"...}, ...]
},
{
title: "List priority 2",
data: [{"distance":"20", "listPriority": "2"...}, ...]
},
...
]
So again, just format your data (most probably within the componentDidMount hook) and when then data is formatted you can include it into the state and eventually feeding it into the SectionList component so that it will re-render