React-admin: Example: How to add a create button with a ReferenceManyField

Created on 19 Jan 2018  路  8Comments  路  Source: marmelab/react-admin

What you were expecting:

https://marmelab.com/admin-on-rest/Fields.html#referencemanyfield

On the documentation I have the option to show a list of related fields using a <ReferenceManyField> which is great, and it works. But following the same documentation, wanting to hide the resource from the sidebar menu

Note: You must add a <Resource> for the reference resource - admin-on-rest needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.)

I'm also blocking my way from creating new rows on that resource, because there is no "Create" button when showing a list of related rows nested inside another resource (and hiding it from the sidebar menu)

What happened instead:
There is no create button, so there is no way to create rows on a nested resource.
reference-many-field-datagrid

I saw the pull request #744 but this is different since this is related to <ReferenceManyField> not <ReferenceArrayInput>

Steps to reproduce:
Same snippet of code on the documentation:

import React from 'react';
import { Edit, Datagrid, SimpleForm, DisabledInput, DateField, EditButton, ReferenceManyField, TextField, TextInput } from 'admin-on-rest';

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput label="Id" source="id" />
            <TextInput source="title" />
            <ReferenceManyField label="Comments" reference="comments" target="post_id">
                <Datagrid>
                    <TextField source="body" />
                    <DateField source="created_at" />
                    <EditButton />
                </Datagrid>
            </ReferenceManyField>
        </SimpleForm>
    </Edit>
);

Environment

  • Admin-on-rest version: 1.3.3
  • Last version that did not exhibit the issue (if applicable): n/a
  • React version: latest
  • Browser: any
enhancement

Most helpful comment

Example: https://codesandbox.io/s/2393m2k5rj

The relevant code parts are:

  • the CreateCommentButton component inside src/posts.js
  • the CommentCreate component inside src/comments.js (note how we set the defaultValue prop on SimpleForm)

All 8 comments

Duplicate of #890 ?

I don't think so. On that issue he's referring to a pre-filled create resource form. This is just having a create button on a nested resource.

This will be possible in 2.0. We'll add an example for this usecase. I renamed your issue accordingly

Example: https://codesandbox.io/s/2393m2k5rj

The relevant code parts are:

  • the CreateCommentButton component inside src/posts.js
  • the CommentCreate component inside src/comments.js (note how we set the defaultValue prop on SimpleForm)

Broken link 馃槩

Thanks for reporting, I updated the link

Thx a lot @djhi

I tried to put the defaultValue on the SimpleForm component (as you did) but it did not work. So I put it directly on the ReferenceInput component and it works !

There is a new section in the documentation with advanced tutorials. It includes one for this use case: https://marmelab.com/react-admin/AdvancedTutorials.html

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rkyrychuk picture rkyrychuk  路  3Comments

ericwb picture ericwb  路  3Comments

Kmaschta picture Kmaschta  路  3Comments

mbj36 picture mbj36  路  3Comments

samanmohamadi picture samanmohamadi  路  3Comments