<EditDialog>

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

Usage

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

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

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

In the related <Resource>, you don’t need to declare an edit component as the edition UI is part of the list component:

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

<EditDialog> accepts the same props as the <Edit> 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
• id: the id of the record to edit
• mutationMode: switch to optimistic or pessimistic mutations (undoable by default)
• mutationOptions: options for the dataProvider.update() call
• queryOptions: options for the dataProvider.getOne() call
• 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.update()

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

Usage Without Routing

By default, <EditDialog> creates a react-router <Route> for the edition path (e.g. /posts/2), and renders when users go to that location (either by clicking on a datagrid row, 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 edit dialog in another page (e.g. to edit a related record).

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

Put <EditInDialogButton> wherever you would put an <EditButton>, and use the same children as you would for an <Edit> component (e.g. a <SimpleForm>):

import {
  Datagrid,
  ReferenceManyField,
  Show,
  SimpleForm,
  SimpleShowLayout,
  TextField,
  TextInput,
} from "react-admin";
import { EditInDialogButton } 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">
                <Datagrid>
                    <TextField source="first_name" />
                    <TextField source="last_name" />
                    <EditInDialogButton>
                        <SimpleForm>
                            <TextInput source="first_name" />
                            <TextInput source="last_name" />
                        </SimpleForm>
                    </EditInDialogButton>
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
    </Show>
);

Check the <EditInDialogButton> component for more details.