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.
Related
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
How to change column title datagrid ?
I need to change the caption of the columns, but I'm not getting.
The Code:
<List title="Todos Usuários" {...props}>
<Datagrid>
<TextField title="Codigo" --> not worked source="id" />
<TextField source="name" />
<EmailField source="email" />
</Datagrid>
</List>
Use label instead of title, but it is correct to use translation files to automatically get the required field labels: "Translating Resource and Field Names": https://marmelab.com/react-admin/Translation.html
I have three tables (shown below):
Stories table:
Questions table:
Here, fetching "questions" using the story_id works fine.
Questions-choices table:
(The problem)
When we fetch "question-choices" based on question_id, it doesn't return relevant results but rather returns all "question_choices". Interestingly, if I use the correct_answer column instead of question_id it works fine (fetches specific results).
Below is the react-admin code:
// To fetch "questions" based on `story_id`
<ReferenceManyField
addLabel={false}
reference="questions"
target="story_id"
sort={{ field: 'created_at', order: 'DESC' }}
>
<Datagrid>
<TextField source="text" />
<DateField source="created_at" />
<ShowButton />
</Datagrid>
</ReferenceManyField>
// And to fetch "question_choices" based on `question_id`
<ReferenceManyField
addLabel={false}
target="question_id" // if use "correct_answer" instead of "question_id", it works
reference="questionchoices"
>
<Datagrid hasBulkActions>
<TextField label="Name" source="name" />
<TextField label="correct answer" source="correct_answer" />
<DateField source="created_at" />
<ShowButton />
<EditButton/>
</Datagrid>
</ReferenceManyField>
How can I handle this problem?
This was issue in the server-side, the server was not responding against foreign key ID
I am trying to add bulk action capabilities to <MuiGridList> component in react-admin 2.9.7. While rendering table like this:
<List>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
Checkboxes are shown in the first column, corresponding to this demo https://marmelab.com/react-admin-demo/#/categories. That's awesome.
Then I have grid layout (which I am switching to dynamically from list view if that's important):
<List>
<MuiGridList
cellHeight={180}
cols={getColsForWidth(width)}
className={classes.gridList}
>
{ids.map(id => (
<GridListTile>
<Checkbox/>
<EditButton to={linkToRecord(basePath, data[id].id)}/>
<ThumbnailField record={data[id]}/>
<GridListTileBar
className={classes.tileBar}
title={data[id].name}
key={id}
/>
</GridListTile>
))}
</MuiGridList>
</List>
This looks like a demo at https://marmelab.com/react-admin-demo/#/products but how can I achieve the same bulk actions capabilities as in <Datagrid> component?
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.