xenial-black
xenial-black2y 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
kapa.ai2y 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
kapa.ai2y 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
kapa.ai2y ago
<@296624290843983873> kapa.ai is still learning and improving, please let us how it did by reacting below
wise-white
wise-white2y ago
hi, do you have notification provider ? and which ui library are u using ?
xenial-black
xenial-blackOP2y ago
material ui. About the notification provider i think i am using the default one, cause I am watching the Javamastery youtube video
wise-white
wise-white2y ago
but it shows notification in tutorial video, isn't it ?
xenial-black
xenial-blackOP2y 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
wise-white
wise-white2y 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"
};
}
}
});
xenial-black
xenial-blackOP2y ago
Thank you very much