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?

Both will be easy to do in the upcoming 1.2.0 version (see the #692 Pull Request on the subject: https://github.com/marmelab/admin-on-rest/pull/692). In the meantime, you'll have top copy and paste the current Edit component to add your own button, and to create a custom saga to modify the redirection behavior. Since it's quite hard to do, and since 1.2.0 is not far, I advise you to wait ;) — François Zaninotto, Jun 26 '17 at 16:15
@FrançoisZaninotto now that 1.2 has been released can you provide the answer to this question. I do not want to create a duplicate question. — Joseph Persico, Mar 21 '18 at 18:02

score 1 · Accepted Answer · answered Apr 08 '18 at 08:35

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!

admin-on-rest: customizing Edit component

1 Answers1