React-admin documentation suggests to filter data via referencing to another endpoint like:
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn />
<ReferenceInput
label="User"
source="userId"
reference="users"
allowEmpty
>
<SelectInput optionText="name" />
</ReferenceInput>
</Filter>
But in my case there is no need to refer to another endpoint and I would like to filter current list relying on data from this list:
<Filter {...props}>
<SelectInput label='Title' source='Title' allowEmpty/>
</Filter>
But the filter list is empty. How can I data from "title"? I will be grateful for any possible help.
Using the ReferenceInput will set the choices property of the SelectInput. If you want to use the SelectInput alone, you need to provide a choices property by yourself like
<SelectInput
choices={items.map(({ id, name }) => ({
id,
name
}))}
label="My Select"
source="userId"
/>
Related
Hello stackoverflow so I have a custom components inside of my create simpleform looking like this.
<Create {...props}>
<SimpleForm {...props}>
<TextField id="standard-basic" onChange={onChangeLabel} value={entityLabel} placeholder="Audience label" />
<br />
<EntityInput onSelectEntity={addEntity} entityNames={entityNames} />
<TagInput setSelectedTags={addSelectedTag} selectedTags={selectedTags} />
<br />
</SimpleForm>
</Create>
My question is how do I enable the save button and pass in custom data and tell the save button which records to create?
Have spent several hours trying to get ReferenceManyField to display some data in a nested DataGrid.
<Show {...this.props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
{/* THE FOLLOWING COMPONENT DOES NOT DISPLAY ANY DATA. WHY NOT??? */}
<ReferenceManyField label="Stores" reference="stores" target="companies_id">
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="storeName" />
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
I have created a massively stripped down version of my app, which demonstrates the problem:
https://codesandbox.io/s/react-admin-referencemanyfield-issue-forked-lde6c
I am certain there has to be a simple explanation for this issue, but as a relative newcomer to React/ReactAdmin/Typescript I just can't see it. What am I doing wrong?
Grateful for any tips & advice.
You haven't declared the stores resource in your Admin component.
Add a <Resource name="stores" /> inside Admin
As the title says. I need to use a ReferenceField inside of a ArrayInput/SimpleFormIterator. I keep getting the following error:
TypeError: Cannot read property 'replace' of undefined
Versions:
react-admin: 3.2.3
react: 16.12.0
Here is a snippet of the code:
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
There is a resource called specialty and this works inside of an ArrayField in other parts of the application like so:
<ArrayField source="specialties" label=" Specialties">
<SingleFieldList>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
</SingleFieldList>
</ArrayField>
Not sure if this just isn't possible within this framework or if I'm implementing this wrong. If there is a way to fix this or a different want to go about this please let me know! Thanks.
From the documentation:
Note: SimpleFormIterator only accepts Input components as children. If you want to use some Fields instead, you have to use a <FormDataConsumer> to get the correct source,..."
import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';
<ArrayInput source="backlinks">
<SimpleFormIterator disableRemove >
<DateInput source="date" />
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
return (
<TextField
source={getSource('url')}
record={scopedFormData}
/>
);
}}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
or include input fields
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceInput label="Specialties Link" source="ID" reference="specialty">
<SelectInput optionText="{Your description field}" />
</ReferenceInput>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
I would like create a file browser with <List /> component in <Show /> component.
Let's say we have a user with home directory and we want to create a file browser to this directory with ability to remove files. The idea of files doesn't match the idea of simple tables, which rows can be edited.
So I have created my own component with username and directory as states, useDataprovider() as hook, and <Table/> from MUI, altered data provider a bit. And it works quite nice.
The problem comes when there are many position in list, like 50+. A pagination would be nice. So I tried to fake props of <List /> and later <ListView /> to replace <Table /> but I failed.
After short code review, it looks like implementing <List /> as is, is not possible, because many hooks and other things it uses. In general nesting one into another of any type would be a mess in come.
My idea of this would look like this:
function HomedirBrowser({username}) {
const [usrPath, setUsrPath] = React.useState("/");
return (<List
resource={`/users/${username}/dir/${usrPath}`}
>
<Datagrid>
<TextField source="type"/>
<TextField source="name"/>
<TextField source="last_edit"/>
<TextField source="size"/>
<Button onClick={({record}) => setUsrPath(usrPath + "/" + record.name)}>Enter</Button>
</Datagrid>
</List>)
}
The custom resource which would depend on a state and the button could alter the state.
Is this possible to do? Or there is any other way to achieve nesting one element into another.
Of course, I don't want to save state to browsing in url of anywhere at all.
I had a similar problem. I wanted to place a List component inside a Show component. Here is an example what I wanted to achieve:
const AuthorShow = props => (
<Show {...props}>
<TabbedShowLayout>
<Tab label='author'>
<TextField source="firstName"/>
<TextField source="lastName"/>
</Tab>
<Tab label='books'>
<List {...props}
resource='books'
filter={{authorId: props.id}}>
<Datagrid>
<TextField source="title" />
</Datagrid>
</List>
</Tab>
</TabbedShowLayout>
</Show>)
Although I explicitly passed 'resource' prop, it was ignored and Show resource was used - authors. I managed to fix this behavior by wrapping List in a Fragment.
const AuthorShow = props => (
<Show {...props}>
<TabbedShowLayout>
<Tab label='author'>
<TextField source="firstName"/>
<TextField source="lastName"/>
</Tab>
<Tab label='books'>
<Fragment>
<List {...props}
resource='books'
filter={{authorId: props.id}}>
<Datagrid>
<TextField source="title" />
</Datagrid>
</List>
</Fragment>
</Tab>
</TabbedShowLayout>
</Show>)
I don't know what caused that you failed to use List but this one may give you some clue at least.
I have the similar code:
<Fragment>
<List
{...props}
resource="card_program_options"
filterDefaultValues={{ card_id: 1 }}
sort={{ field: "id", order: "ASC" }}
>
<Datagrid>
<TextField source="card_id" />
<TextField source="card_programs_id" />
</Datagrid>
</List>
</Fragment>
But the only thing i see on the page is No results found
screenshot of No results found in show
I see the request made in the backend and completes with a 200 response code.
Help is appreciated!
When using TabbedForm in react-admin, Create view will remove input value when switch tab. It doesn't happend with Edit view.
In redux state, ##redux-form/INITIALIZE action is the different between 2 views. Anyone has any idea why?
<Create {...props}>
<TabbedForm>
<FormTab label="rate">
<TextInput source="name" label="Name"/>
<NumberInput source="rate" label="Rate" defaultValue="0" />
</FormTab>
<FormTab label="score">
<TextInput source="score" label="Score"/>
<NumberInput source="number" label="Number" defaultValue="0" />
</FormTab>
</TabbedForm>
</Create>