How to customize onFinish notification messages
@kapa.ai How can I customize notification messages when running onFinish from CreateFormProps or EditFormProps?
8 Replies
Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To customize notification messages when running
onFinish
from CreateFormProps
or EditFormProps
in refine, you can use the successNotification
and errorNotification
properties. These properties allow you to define custom messages that will be shown when the form submission is successful or fails.
Here is an example of how you can customize these notifications:
In this example, the successNotification
function customizes the message and description for a successful form submission, while the errorNotification
function customizes the message and description for a failed form submission.
For more detailed information, you can refer to the Notification Providers documentation (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) and the useForm documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#successnotification).
If you need to change the form data before submitting it to the API, you can override the onFinish
function as shown in the following example:
This example demonstrates how to modify form data before submitting it to the API by overriding the onFinish
function.
For more information, you can refer to the Ant Design useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
By using these properties and functions, you can fully customize the notification messages and form data handling in your refine application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@705425032960016475> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush•2mo ago
How can I do this with Antd?
@kapa.ai How can I do this with antd?
Let me check the knowledge base for you. One moment! :books:
----------------------
To customize notification messages when running
onFinish
from CreateFormProps
or EditFormProps
using Ant Design in refine, you can use the successNotification
and errorNotification
properties. These properties allow you to define custom messages that will be shown when the form submission is successful or fails.
Here is an example of how you can customize these notifications with Ant Design:
In this example, the successNotification
function customizes the message and description for a successful form submission, while the errorNotification
function customizes the message and description for a failed form submission.
For more detailed information, you can refer to the Notification Providers documentation (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) and the Ant Design useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#successnotification).
By using these properties and functions, you can fully customize the notification messages and form data handling in your refine application with Ant Design.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@705425032960016475> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush•2mo ago
@kapa.ai How can I do this using the antd Form component onFinish callback?
Let me check the knowledge base for you. One moment! :books:
----------------------
To customize notification messages using the Ant Design
Form
component's onFinish
callback in refine, you can override the onFinish
function and use Ant Design's notification system. Here is an example of how you can achieve this:
In this example:
- The handleOnFinish
function is defined to override the default onFinish
behavior.
- Inside handleOnFinish
, the onFinish
function from useForm
is called with the modified form values.
- The then
and catch
methods are used to handle the promise returned by onFinish
, allowing you to show success or error notifications using Ant Design's notification
component.
This approach ensures that you can customize the notification messages based on the result of the form submission.
For more information, you can refer to the Ant Design useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api) and the Ant Design notification documentation (https://ant.design/components/notification/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@705425032960016475> kapa.ai is still learning and improving, please let us know how it did by reacting below