8 Replies
Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To use the
CloneButton
in your refine application, you need to follow these steps. The CloneButton
component is available in various UI frameworks like Ant Design, Mantine, Chakra UI, and Material UI. Below are examples of how to use the CloneButton
with different UI frameworks.
Ant Design
Source (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/clone-button#usage)
Mantine
Source (https://refine.dev/docs/ui-integrations/mantine/components/buttons/clone-button#usage)
Chakra UI
```jsx
import { List, CloneButton } from "@refined
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@761921731505946634> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black•5mo ago
@kapa.ai Clone page didn't render initial value
Let me check the knowledge base for you. One moment! :books:
----------------------
If your clone page didn't render the initial values, you need to ensure that the
useForm
hook is correctly set up to fetch and set the initial values from the record you are cloning. Here is an example of how to set up the clone page using the useForm
hook:
Example with useForm
Hook
Key Points
1. Fetch Data: Ensure that the useForm
hook is fetching the data correctly using the id
of the record you want to clone.
2. Set Initial Values: Use React.useEffect
to set the initial values of the form fields once the data is fetched.
3. Handle Form Submission: Use the onFinish
method from useForm
to handle form submission.
By following these steps, you should be able to render the initial values correctly on your clone page.
For more details, you can refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form#usage).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@761921731505946634> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black•5mo ago
how to add clone page to resources? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To add a clone page to your resources in a refine application, you need to define the clone component in your resource configuration. Below is an example of how to do this:
Step-by-Step Guide
1. Define the Clone Component: Create a component for the clone page. This component will handle the cloning logic and form.
2. Add the Clone Component to Resources: Update your resource configuration to include the clone component.
Important Notes
- Ensure that the
clone
property in the resource configuration points to the correct clone component.
- The useForm
hook should be correctly set up to fetch the initial data and handle form submission.
By following these steps, you should be able to add a clone page to your resources and ensure it works correctly.
For more information, you can refer to the useNavigation documentation (https://refine.dev/docs/routing/hooks/use-navigation#clone) and the CloneButton documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/clone-button#resource).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@761921731505946634> kapa.ai is still learning and improving, please let us know how it did by reacting below