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:

import { useForm } from "@refinedev/core";

useForm({
  // it will be called when the form is submitted successfully
  // By setting it to `false`, you can disable the notification.
  successNotification: (data, values, resource) => {
    return {
      message: `Successfully created ${data.title}`,
      description: "Good job!",
      type: "success",
    };
  },
  // it will be called when the form is submitted with errors
  // By setting it to `false`, you can disable the notification.
  errorNotification: (error, values, resource) => {
    return {
      message: `Failed to create ${values.title}`,
      description: error.message,
      type: "error",
    };
  },
});

import { useForm } from "@refinedev/core";

useForm({
  // it will be called when the form is submitted successfully
  // By setting it to `false`, you can disable the notification.
  successNotification: (data, values, resource) => {
    return {
      message: `Successfully created ${data.title}`,
      description: "Good job!",
      type: "success",
    };
  },
  // it will be called when the form is submitted with errors
  // By setting it to `false`, you can disable the notification.
  errorNotification: (error, values, resource) => {
    return {
      message: `Failed to create ${values.title}`,
      description: error.message,
      type: "error",
    };
  },
});

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:

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";
export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";
export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

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: ----------------------

kapa.ai•2mo ago

<@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?

kapa.ai•2mo ago

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:

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm({
    // it will be called when the form is submitted successfully
    // By setting it to `false`, you can disable the notification.
    successNotification: (data, values, resource) => {
      return {
        message: `Successfully created ${data.title}`,
        description: "Good job!",
        type: "success",
      };
    },
    // it will be called when the form is submitted with errors
    // By setting it to `false`, you can disable the notification.
    errorNotification: (error, values, resource) => {
      return {
        message: `Failed to create ${values.title}`,
        description: error.message,
        type: "error",
      };
    },
  });

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm({
    // it will be called when the form is submitted successfully
    // By setting it to `false`, you can disable the notification.
    successNotification: (data, values, resource) => {
      return {
        message: `Successfully created ${data.title}`,
        description: "Good job!",
        type: "success",
      };
    },
    // it will be called when the form is submitted with errors
    // By setting it to `false`, you can disable the notification.
    errorNotification: (error, values, resource) => {
      return {
        message: `Failed to create ${values.title}`,
        description: error.message,
        type: "error",
      };
    },
  });

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

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: ----------------------

kapa.ai•2mo ago

<@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?

kapa.ai•2mo ago

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:

import { Create, useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    })
      .then(() => {
        notification.success({
          message: "Success",
          description: "Successfully created the user",
        });
      })
      .catch((error) => {
        notification.error({
          message: "Error",
          description: `Failed to create the user: ${error.message}`,
        });
      });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { Create, useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import React from "react";

export const UserCreate: React.FC = () => {
  const { formProps, saveButtonProps, onFinish } = useForm();

  const handleOnFinish = (values) => {
    onFinish({
      fullName: `${values.name} ${values.surname}`,
    })
      .then(() => {
        notification.success({
          message: "Success",
          description: "Successfully created the user",
        });
      })
      .catch((error) => {
        notification.error({
          message: "Error",
          description: `Failed to create the user: ${error.message}`,
        });
      });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Surname" name="surname">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

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: ----------------------

kapa.ai•2mo ago

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