In React-admin i am trying to implement a referenceinput. I see that the list api call is made and response is availble. however the selectinput component remains empty.
I would appreciate any help.
Table source column is notes. and reference resource is notes:
<Create actions={<CoaActions />} title="New Coa" {...props}>
<SimpleForm variant="standard">
<TextInput source="code" />
<TextInput multiline source="title" />
<TextInput source="iscashbook" />
<TextInput source="isbankbook" />
<ReferenceInput label="Notes" source="notes" resource="notes" reference="notes/list">
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="obal" />
<BooleanInput source="active" />
</SimpleForm>
</Create>
Remove the resource prop from the referenceinput
Related
In React Admin, How to disable the selection of a reference input?
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" />
</ReferenceInput>
Per the docs, you can use the disabled property on React-Admin input components, including ReferenceInput:
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" disabled />
</ReferenceInput>
You could alternatively set it to a boolean:
… disabled=true />
Or you could set it to a function that returns a boolean. This is often useful as you could set it to disable the field based on some logic:
… disabled={someFunction} />
We can do it as below:
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" disabled />
</ReferenceInput>
I have an object with a Json array as a field:
{
name: "test",
field: [
{name: "field1",value: "value1"},
{name: "field2",value: "value2"}
]
}
I am using api platform as a data provider.
I am using EditGuesser of react admin as follows:
const SetsEdit = (props:any) => (
<EditGuesser {...props}>
<InputGuesser source="name" />
<ArrayInput source="field">
<SimpleFormIterator inline disableAdd={disableAdd(props)}>
<TextInput source="name" helperText={false} />
<TextInput source="value" helperText={false} />
</SimpleFormIterator>
</ArrayInput>
</EditGuesser>
);
And I'm using the edit guesser in hydra admin
<HydraAdmin
dataProvider={dataProvider(setRedirectToLogin)}
layout={MyLayout}
loginPage={LoginPage}>
<ResourceGuesser
name="sets"
edit={SetsEdit}
/>
</HydraAdmin>
What I am trying to do is I want to disable Add when field.length is >= to 4.
So I want to add a condition to the prop disableAdd based on the value of the object.
How do I pass the object value to the function to return true or false.
You have to watch for the actual form data using react-hook-form's useWatch or react-admin's <FormDataConsumer>, and use that data in your disableAdd prop.
Something like (not tested):
const SetsEdit = (props:any) => (
<EditGuesser {...props}>
<InputGuesser source="name" />
<FormDataConsumer>
{({ formData }) => (
<ArrayInput source="field">
<SimpleFormIterator inline disableAdd={disableAdd(formData)}>
<TextInput source="name" helperText={false} />
<TextInput source="value" helperText={false} />
</SimpleFormIterator>
</ArrayInput>
)}
</FormDataConsumer>
</EditGuesser>
);
Here is an example of my schema and how i've implemented it in react-admin, can you tell me if is the best way for getting data from a junction table ?
const Media = () =>
<ReferenceManyField label="Kiosks" source="id" target="media_id" reference="kiosk_media">
<SingleFieldList>
<ReferenceManyField source="kiosk_id" target="id" reference="kiosk">
<SingleFieldList>
<TextField source="name" />
</SingleFieldList>
</ReferenceManyField>
</SingleFieldList>
</ReferenceManyField>
I had the same issue, I managed it on my back end to follow this structure:
Kiosk: { id:..., ... Medias:[{id:... },{id:...},{id:...}], ... }
and then I used ArrayField to display. https://marmelab.com/react-admin/Fields.html#arrayfield
Edit 2: I figured a way to do this with the free components. You were close, but you need to use just a plain reference to the final kiosk table. This snippet would show a table of kiosk records linked to the current media record through the kiosk_media table.
<ReferenceManyField label="Kiosks" reference="kiosk_media" target="media_id">
<Datagrid>
<ReferenceField reference="kiosk" source="kiosk_id" link="show" />
</Datagrid>
</ReferenceManyField>
-- Original Answer --
You can probably use the ReferenceManyToManyField.
const AuthorShow = () => (
<Show>
<SimpleShowLayout>
<TextField source="first_name" />
<TextField source="last_name" />
<DateField source="date_of_birth" />
<ReferenceManyToManyField
reference="books"
through="book_authors"
using="author_id,book_id"
>
<Datagrid>
<TextField source="title" />
<DateField source="published_at" />
</Datagrid>
</ReferenceManyToManyField>
<EditButton />
</SimpleShowLayout>
</Show>
);
https://marmelab.com/react-admin/FieldsForRelationships.html#referencemanytomanyfield
Edit: I just realized that this is a paid Enterprise-only feature, but I'll leave this here for reference.
I am using react-admin v2.9.6 with firebase.
But it is not showing the search bar even if I added it in my code.
Seriously there is a bug which I can see in my console logs.
Here is my code and anyone who can help me contact me if you like.
const SearchFilter = props => (
<Filter {...props}>
<TextField label="Search" source="name" alwaysOn />
</Filter>
)
export const SearchList = props => (
<List {...props} filters={<SearchFilter />}>
<Datagrid>
<TextField source="name" />
<TextField source="avgRating" />
<TextField source="numReviews" />
<EditButton label="" />
<DeleteButton label="" redirect={false} />
</Datagrid>
</List>
)
I love react.js but react-admin is the first time.
Thanks. :)
In your SearchFilter component, try using <TextInput /> instead of <TextField />
Like this:
const SearchFilter = props => (
<Filter {...props}>
<TextInput label="Search" source="name" alwaysOn />
</Filter>
)
In case this issue/problem is still active for you. Doctor Agon is right, use TextInput instead of TextField as a Field only can read already defined value which comes from TextInput.
For some reason, the ReferenceInput works fine on my Edit form; but on Create form, it shows as disabled and empty (I use the same code for both form). It also doesn't show any error in chrome dev tools. Do I have to do any additional stuff for the Create form to work? Thanks
This works for me. Note "allowEmpty" in ReferenceInput
<Create title="My title" {...props}>
<SimpleForm>
<TextInput label= "field 1" source="f1" validate={[ required, minLength(3), maxLength(20) ]} />
<ReferenceInput label="field 2" source="f2" validate={[ required ]} reference="reference1" allowEmpty>
<AutocompleteInput optionText="f3" />
</ReferenceInput>
</SimpleForm>
</Create>