successNotification

How to customize success notification after edit a resource

5 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the success notification after editing a resource in refine, you can use the successNotification property. This property allows you to define a custom notification message that will be displayed after the data is successfully fetched or updated. Here is an example of how you can customize the success notification using the useForm hook, which is commonly used for handling form submissions, including editing a resource:

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Post Successfully created with ${data.title}`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Post Successfully created with ${data.title}`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

In this example, the successNotification function returns an object that defines the message, description, and type of the notification. You can customize the message and description to fit your specific needs. For more details, you can refer to the useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#successnotification). If you are using a different hook for editing a resource, such as useUpdateMany, you can follow a similar approach:

const { mutate } = useUpdateMany();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

const { mutate } = useUpdateMany();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

For more information, you can refer to the useUpdateMany documentation (https://refine.dev/docs/data/hooks/use-update-many#successnotification). Make sure you have the NotificationProvider (https://refine.dev/docs/notification/notification-provider/) set up in your application for the successNotification prop to work. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

judicial-coral•3mo ago

@kapa.ai I'm using the default EditButton

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To customize the success notification when using the default EditButton in refine, you can leverage the useForm hook, which is typically used for handling form submissions, including editing a resource. Here’s how you can do it: 1. Ensure NotificationProvider is set up: First, make sure you have the NotificationProvider (https://refine.dev/docs/notification/notification-provider/) set up in your application. This is required for the successNotification prop to work. 2. Customize the success notification: Use the useForm hook to customize the success notification. Here’s an example:

import { useForm } from "@pankod/refine";

const MyEditComponent = () => {
    const { formProps, saveButtonProps } = useForm({
        successNotification: (data, values, resource) => {
            return {
                message: `Post Successfully updated with ${data.title}`,
                description: "Success with no errors",
                type: "success",
            };
        },
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps}>
                {/* Your form fields here */}
            </Form>
        </Edit>
    );
};

import { useForm } from "@pankod/refine";

const MyEditComponent = () => {
    const { formProps, saveButtonProps } = useForm({
        successNotification: (data, values, resource) => {
            return {
                message: `Post Successfully updated with ${data.title}`,
                description: "Success with no errors",
                type: "success",
            };
        },
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps}>
                {/* Your form fields here */}
            </Form>
        </Edit>
    );
};

In this example, the successNotification function returns an object that defines the message, description, and type of the notification. You can customize the message and description to fit your specific needs. For more details, you can refer to the useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#successnotification). By following these steps, you can customize the success notification that appears after editing a resource using the default EditButton in refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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