unsaved changes warning in custom component

worthy-azure · 2023-08-10T10:54:55.962Z

aside Mui components I have another plugins in my form so I need to show this warning if i leave changes in that too. so can I connect those

K

kapa.ai•8/10/23, 10:54 AM

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•8/10/23, 10:55 AM

----------------------
Yes, you can connect other plugins to your form and show warnings if there are unsaved changes. Refine provides a hook called

useModalForm

useModalForm

which allows you to manage a form within a modal. It provides some useful methods to handle the form modal, including a

warnWhenUnsavedChanges

warnWhenUnsavedChanges

warnWhenUnsavedChanges

warnWhenUnsavedChanges property.

Here is an example of how you can use it:

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

In this example,

warnWhenUnsavedChanges: true

warnWhenUnsavedChanges: true

warnWhenUnsavedChanges: true

warnWhenUnsavedChanges: true will show a warning if there are unsaved changes when the user tries to leave the form.

You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•8/10/23, 10:55 AM

@763439201353596968 kapa.ai is still learning and improving, please let us know how it did by reacting below

W

worthy-azureOP•8/10/23, 11:19 AM

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

K

kapa.ai•8/10/23, 11:19 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•8/10/23, 11:19 AM

Sorry @alfaz_muhammed, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

W

worthy-azureOP•8/10/23, 11:51 AM

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

K

kapa.ai•8/10/23, 11:51 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•8/10/23, 11:51 AM

Sorry @alfaz_muhammed, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

W

worthy-azureOP•8/10/23, 11:52 AM

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

K

kapa.ai•8/10/23, 11:52 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•8/10/23, 11:52 AM

----------------------
Yes, you can use the

useState

useState

hook to control the

warnWhenUnsavedChanges

warnWhenUnsavedChanges

warnWhenUnsavedChanges

warnWhenUnsavedChanges property. You can set the state to

true

true

when you want to show the warning and

false

false

false

false when you don't. Here's an example of how you can do this:

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

In this example,

showWarning

showWarning

showWarning

showWarning is a state variable that you can control. When

showWarning

showWarning

showWarning

showWarning is

true

true

, the warning will be shown when the user tries to leave the page with unsaved changes. When

showWarning

showWarning

showWarning

showWarning is

false

false

false

false, the warning will not be shown.

You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•8/10/23, 11:52 AM

@763439201353596968 kapa.ai is still learning and improving, please let us know how it did by reacting below