Create custom form in react-admin

Question

I am using Edit and SimpleForm from react-admin. How do I create a custom form to allow customised action and type on submit?

App.js

<Resource name="category" list={CategoryList} edit={CategoryEdit}  />

index.js

<Edit actions={<CategoryEditActions />} title={<CategoryTitle />} {...props} >
    <SimpleForm>
      <DisabledInput source="id" />
      <DisabledInput source="code" />
      <TextInput source="name" />
   </SimpleForm>

Here the api call would be /category/:categoryId with PUT request. I want to modify url to /category/:categoryId/test with method as POST. Is there any way to customize this?

I have handled this in my CustomDataProvider -

 case UPDATE:
             if(resource === 'category'){
                    options.method = 'POST';
                    url = `${apiUrl}/${resource}/${params.id}/test`;
                } else {
                    options.method = 'PUT';
                    url = `${apiUrl}/${resource}/${params.id}`;
                }
                break;

Is there any other way to handle it?

score 2 · Accepted Answer · answered Apr 26 '18 at 09:55

2

This is the job of your dataProvider in react-admin (restClient in admin-on-rest). You'll have to create a custom one:

For react-admin: https://marmelab.com/react-admin/DataProviders.html#writing-your-own-data-provider
For admin-on-rest: https://marmelab.com/admin-on-rest/RestClients.html#writing-your-own-rest-client

You'll have to check the resource and type then build the fetch options by yourself.

answered Apr 26 '18 at 09:55

Gildas Garcia

6,966
3
15
29

I had handled url and method type in the custom data provider. I have edited my question to show the case. Is it the only way to do so? – Chetan Gawai Apr 26 '18 at 10:14
Yes, that's the only way – Gildas Garcia Apr 27 '18 at 05:51
Thanks @gildas, you are a saviour – Chetan Gawai Apr 27 '18 at 06:11

Create custom form in react-admin

1 Answers1