afraid-scarlet•17mo ago

Refine doesn't display the green message of successfully submitted

I successfully uploaded a Form in the database, but It doesn't show up the successfully submitted green message on top of page and it doesn't empty the text fields in the Form page.

9 Replies

kapa.ai•17mo ago

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

kapa.ai•17mo ago

---------------------- To show a success notification after the form is submitted successfully, you can use the successNotification prop in the useForm hook. Make sure you have the NotificationProvider (https://refine.dev/docs/api-reference/core/providers/notification-provider/) in your project for this prop to work. Here's an example of how to use the successNotification prop:

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",
    };
  },
});

Regarding clearing the form fields after submission, you can use the reset function provided by the useForm hook. Call the reset function after the form is submitted successfully. Unfortunately, I don't have enough information from the provided extracts to give you a specific code example for resetting the form fields. However, you can refer to the useForm documentation for more information on how to use the reset function: - Refine useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Notification Provider | refine

refine let's you set a notification API by providing the notificationProvider property to the `` component.

useForm | refine

useForm is a hook that allows to manage forms. It has some action methods that create, edit and clone the form. The hook return value comes to according to the called action and it can run different logic depending on the action.

kapa.ai•17mo ago

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

ambitious-aqua•17mo ago

hi, do you have notification provider ? and which ui library are u using ?

afraid-scarlet•17mo ago

material ui. About the notification provider i think i am using the default one, cause I am watching the Javamastery youtube video

ambitious-aqua•17mo ago

but it shows notification in tutorial video, isn't it ?

afraid-scarlet•17mo ago

exactly, just i am making my customizations. I think in the tutorial the message that appears on top of page is in the server side, with res.status(200).json({ message: "Property created succesfully!" }); in the network message i can see it by inspecting the page

ambitious-aqua•17mo ago

i suggest you to double check your implementation because our examples works as normal. https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/form-material-ui-use-form?from-embed=&file=/src/pages/posts/create.tsx and bot it's right, if you can customize like that

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

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

afraid-scarlet•17mo ago

Thank you very much