3

I want to create a 'clone' button from react-admin which will allow me to clone/copy the existing data record into another one and will open an sort of edit form to edit them and create a new entry. How can I do it?

P.S I am using Typescript

currently my code is like this 

<Datagrid rowStyle={modelRowStyle}> 
   <TextField source="format" /> 
   <TextField source="status" /> 
   <EditButton basePath="/models" /> 
   <DeleteButton basePath="/models" /> 
   <CloneButton /> 
</Datagrid>

What should be the function of clone button should it be like edit (because it will take previous values) or like create(because I want to create new)

Create Component looks like this `

export const ModelCreate = (props: object) => (
    <Create title="Create a Model" {...props}>
        <SimpleForm toolbar={<ModelCreateToolbar />}>
            <TextInput source="name" label="Name" autoWidth={true} /> 
            <TextInput source="version" label="Version" />
            <SelectInput source="format" label="Format" choices={Format} optionText="name" optionValue="format" />
            <SelectInput source="group" label="Group" choices={Group} optionText="name" optionValue="group" /> 
        </SimpleForm>
    </Create>
);

`

Anirudh Sharma
  • 129
  • 1
  • 3
  • 9

2 Answers2

2

This sounds entirely possible. However it will require you to understand RA internals quite well and redux form.

You have 2 strategies. 1) Write custom action attached with Clone button that will call the API and redirect to the Create page. The API response should be directed to populate the 'form' key (this is the key in the redux state where the form data is stored) in the state with the chosen record when user hits the clone button

2) Write a redux connected Form component (you might have to write a custom ReduxForm component but you can start with using the RA SimpleForm component maybe it will work) using then use MapStateToProps function to get data into your component. This will work if RA is not clearing the redux state on redirecting to the Create page. You will have to investigate this.

Ok.. This is what you would do for a standard Create Route. What you want to do is 'Custom Behaviour'. Under the hood, the Create component uses Redux Form to handle the form.

https://redux-form.com/7.3.0/

So all the user inputs are directly sent to the redux state. You will have to create a Custom Redux Form that takes data from the State and populates your Form with the initial data. Look at the bottom answer about creating a Custom Form in AOR.

How to richly style AOR Edit page

kunal pareek
  • 1,285
  • 10
  • 21
2

Just so you know, they have implemented the Clone button.

Santa Clauze
  • 163
  • 1
  • 17