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
Related
I have a question regarding react-admin. So I'm building this admin List which Hasura-graphQL. I am able to render Images with the ImageField component which I am using:
<ImageField label="Image" source="image" sortByOrder="DESC"/>
And which I have no problems rendering. But the issue comes when I need to render a video that comes in a URL from my graphQL schema. Something like this:
"video": "https://myappvideo.blob.core.windows.net/posts/post_93753139-524a-4c85-a0fc-d40b47bd95f5.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
"id": 471
},
{
"video": null,
"id": 493
},
{
"video": "https://myappvideo.blob.core.windows.net/posts/post_f9c59f2f-3d2e-4c63-ae1e-65e5324866ad.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
"id": 476
},[...]
How can render videos in my react-admin list? Something where I can show the videos and I can click and reproduce?
React-admin has a way to render Images but I can see something similar for videos.
Any help would be appreciated a lot!
EDIT
This is how I'm actually trying to make this work:
<Datagrid>
<TextField label="Post ID" source="id" sortByOrder="ASC" />
//I am using FileField for this, but it does not work
<FileField label="Content" source="video" rel="video" sortByOrder="ASC" />
<TextField label="Content Type" />
<UserSum source="id" />
<SimpleForm {...props} label="Flagged">
<ApproveData source="id" />
</SimpleForm>
<DateField label="Posted On" source="createdAt" showTime />
<PostListActionToolbar>
<ShowButton label="Details" color="secondary" />
<EditButton label="Archive" color="secondary" />
</PostListActionToolbar>
</Datagrid>
Ok, I just figure out how to do this. Indeed react-admin does not have a way to render videos. So in this case you'll have to create your own component.
Step 1
Is to create the function:
const VideoField = (props) => {
const record = useRecordContext(props);
return <video src={`${record.video}`} controls width="320" height="240"></video>;
}
In this case, you'll have to interpolate the video record inside the video tag. I added the controls and the width and height to add more view on the video
Step 2
You can add a default label into it like this:
VideoField.defaultProps = { label: 'Video' };
This is necessary since it will label your content on the top side of the list.
Step 3
Then add your function in to a component inside the datagrid and you'll be having something like this:
Add it like this on your datagrid
<Datagrid>
<TextField label="Post ID" source="id" sortByOrder="ASC" />
<VideoField source="video" />
<TextField label="Content Type" />
</Datagrid>
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 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?
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>