<CreateDialog>

This Enterprise Edition component offers a replacement to the <Create> component allowing users to create records without leaving the context of the list page.

Usage

Add the <CreateDialog> component as a sibling to a <List> component.

import {
    List,
    Datagrid,
    SimpleForm,
    TextInput,
    DateInput,
    DateField,
    required,
} from 'react-admin';
import { CreateDialog } from '@react-admin/ra-form-layout';

const CustomerList = () => (
    <>
        <List hasCreate>
            <Datagrid>
                ...
            </Datagrid>
        </List>
        <CreateDialog>
            <SimpleForm>
                <TextInput source="first_name" validate={required()} />
                <TextInput source="last_name" validate={required()} />
                <DateInput source="date_of_birth" />
            </SimpleForm>
        </CreateDialog>
    </>
);

Tip: In the example above, notice the <List hasCreate> prop. It is necessary in order to display the “Create” button, because react-admin has no way of knowing that creation form for the “customer” resource exists.

In the related <Resource>, you don’t need to declare a create component as the creation UI is part of the list component:

<Resource name="customers" list={CustomerList} />

Note: You can’t use the <CreateDialog> and have a standard <Edit> specified on your <Resource>, because the <Routes> declarations would conflict. If you need this, use the <CreateInDialogButton> instead.

<CreateDialog> accepts the same props as the <Create> component, and the same type of children (e.g. a <SimpleForm> element).

• children: the components that renders the form
• className: passed to the root component
• component: override the root component
• disableAuthentication: disable the authentication check
• mutationOptions: options for the dataProvider.create() call
• record: initialize the form with a record
• redirect: change the redirect location after successful creation
• resource: override the name of the resource to create
• sx: Override the styles
• title: override the page title
• transform: transform the form data before calling dataProvider.create()

Check the ra-form-layout documentation for more details.

Usage Without Routing

By default, <CreateDialog> creates a react-router <Route> for the creation path (e.g. /posts/create), and renders when users go to that location (either by clicking on a <CreateButton>, or by typing the URL in the browser). If you embed it in the list page as explained above, the dialog will always render on top of the list.

This may not be what you want if you need to display the creation dialog in another page (e.g. to create a related record).

In that case, use the <CreateInDialogButton> component, which doesn’t create a route, but renders the dialog when the user clicks on it.

Put <CreateInDialogButton> wherever you would put a <CreateButton>, and use the same children as you would for a <Create> component (e.g. a <SimpleForm>). Don’t forget to preset the record prop if you want to initialize the form with a foreign key.

import {
  Datagrid,
  ReferenceManyField,
  Show,
  SimpleForm,
  SimpleShowLayout,
  TextField,
  TextInput,
  WithRecord,
} from "react-admin";
import { CreateInDialogButton } from "@react-admin/ra-form-layout";

const CompanyShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="name" />
            <TextField source="address" />
            <TextField source="city" />
            <ReferenceManyField target="company_id" reference="employees">
                <WithRecord render={record => (
                    <CreateInDialogButton record={{ company_id: record.id }}>
                        <SimpleForm>
                            <TextInput source="first_name" />
                            <TextInput source="last_name" />
                        </SimpleForm>
                    </CreateInDialogButton>
                )} />
                <Datagrid>
                    <TextField source="first_name" />
                    <TextField source="last_name" />
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
    </Show>
);

In the above example, <CreateInDialogButton> is used to create a new employee for the current company. The <WithRecord> component helps to set the new employee company id by default.