rare-sapphire•2y ago

Reuse SaveButton

I have a custom Form I where I'm using one of my resources Create components. I want to adjust the redirection after the Entity has been created. Is that possible? So basically I want to re-use my Create-Form like this example, but adjust the redirect path after creation.

<VenueCreate
  goBack={false}
  title={false}
  breadcrumb={false}
  wrapperProps={{ style: { margin: 0 } }}
  // saveButtonProps={{ hideText: true }}
  contentProps={{
    style: { margin: 0, boxShadow: 'none', backgroundColor: 'transparent' },
  }}
/>

<VenueCreate
  goBack={false}
  title={false}
  breadcrumb={false}
  wrapperProps={{ style: { margin: 0 } }}
  // saveButtonProps={{ hideText: true }}
  contentProps={{
    style: { margin: 0, boxShadow: 'none', backgroundColor: 'transparent' },
  }}
/>

2 Replies

kapa.ai•2y ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to adjust the redirection after an entity has been created in Refine. You can achieve this by using the useForm hook and setting the redirect property to false. This will disable the default redirection after a successful mutation. You can then manage the redirection as you want in your buttons. Here is an example of how you can use the useForm hook to disable redirection:

import { useForm } from "@refinedev/core";  
  
import { IPost } from "interfaces";  
  
export const PostCreate: React.FC = () => {  
 const { formLoading, onFinish, redirect } = useForm<IPost>({  
 redirect: false,  
 });  
};

import { useForm } from "@refinedev/core";  
  
import { IPost } from "interfaces";  
  
export const PostCreate: React.FC = () => {  
 const { formLoading, onFinish, redirect } = useForm<IPost>({  
 redirect: false,  
 });  
};

(Source: refine.dev docs (https://refine.dev/docs/advanced-tutorials/forms/save-and-continue)) Additionally, you can also set the redirect option in the <Refine> component's options prop to control the redirection behavior based on the form action:

const App: React.FC = () => {  
 return (  
 <Refine  
 ...  
 options={{  
 redirect: {  
 afterCreate: "show",  
 afterClone: "edit",  
 afterEdit: false,  
 },  
 }}  
 />  
 );  
};

const App: React.FC = () => {  
 return (  
 <Refine  
 ...  
 options={{  
 redirect: {  
 afterCreate: "show",  
 afterClone: "edit",  
 afterEdit: false,  
 },  
 }}  
 />  
 );  
};

(Source: refine.dev docs (https://refine.dev/docs/api-reference/core/components/refine-config)) In your case, you can use the redirect function returned by useForm to programmatically specify the destination after a successful mutation:

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

(Source: refine.dev docs (https://refine.dev/docs/api-reference/core/hooks/useForm)) Please adjust the code snippets according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@317433576721219584> kapa.ai is still learning and improving, please let us how it did by reacting below

Reuse SaveButton

Did you find this page helpful?