admin-on-rest: customizing Edit component

Question

I need to customize Edit component in two ways:

• Add custom button, but not to the upper panel (with 'List' and 'Refresh' buttons), but at the bottom of the component (next to the default 'Save' button).
• Turn off redirect on default 'Save' button click (to make it just save and stay on page).

How do I achieve this?

Answer 1

I came accross this unanswered question. Since I just did something like this very recently myself I will share how I did it here. I am using admin on rest 1.4.0 btw.

So, on your <Edit> component, add this toolbar={<MyCustomToolbar />}. Then create a custom toolbar with your buttons in it. On the button you can use redirect to redirect to another page.

Code example:

import { SaveButton, Toolbar, TextInput, Edit, SimpleForm  } from 'admin-on-rest';

const MyToolbar = props => 
 <Toolbar {...props} >
   <SaveButton label="Save & to dashboard" redirect="/" />
   .. more buttons here..
 </Toolbar>;


export const EditForm = (props) => (
<Edit title="Edit" {...props}>
    <SimpleForm toolbar={<MyToolbar />}>
        <TextInput source="company_website" type="url" />
        <TextInput source="address_street" />
        <TextInput source="address_zip" />
        <TextInput source="address_unitnr" />
        <TextInput source="address_city" />
    </SimpleForm>
</Edit>
);

Hope this helps!