absent-sapphire•2y ago

save

when create a new item or product and clicking a save i want to pass props that are outside of form

8 Replies

Hi @Alex YT. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can pass additional properties to the save button using the saveButtonProps property. This property is available in both the <Create> and <Edit> components. Here's an example of how you can use saveButtonProps in the <Create> component:

import { Create } from "@refinedev/antd";  

const PostCreate: React.FC = () => {  
 return (  
 <Create saveButtonProps={{ size: "small" }}>
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

import { Create } from "@refinedev/antd";  

const PostCreate: React.FC = () => {  
 return (  
 <Create saveButtonProps={{ size: "small" }}>
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

In this example, the size property is passed to the save button, making it small. You can replace size: "small" with any other properties you want to pass to the save button. For more information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#savebuttonprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

absent-sapphireOP•2y ago

@kapa.ai while saving i want to pass data outside the form how to do oit?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can modify the data before submitting it to the API by overriding the submit function in the useForm or useStepsForm hooks. This allows you to include additional data outside of the form. Here's an example of how you can do this:

import { useStepsForm } from "@refinedev/antd";  

const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 // Add additional data here
 };  
 onFinish(data as any);  
 },  
});

import { useStepsForm } from "@refinedev/antd";  

const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 // Add additional data here
 };  
 onFinish(data as any);  
 },  
});

In this example, the submit function is overridden to combine the name and surname fields into a fullName field. You can add additional data to the data object before calling onFinish. For more information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

absent-sapphireOP•2y ago

@kapa.ai how to pass default values on useModal form

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can pass default values to the useModalForm hook using the defaultValues or defaultFormValues property. This property is used to pre-populate the form with data that needs to be displayed and is only available for the "create" action. Here's an example of how you can do this:

const modalForm = useModalForm({  
 defaultValues: {  
 title: "Hello World",  
 },  
});

const modalForm = useModalForm({  
 defaultValues: {  
 title: "Hello World",  
 },  
});

const modalForm = useModalForm({  
 defaultFormValues: {  
 title: "Hello World",  
 },  
});

const modalForm = useModalForm({  
 defaultFormValues: {  
 title: "Hello World",  
 },  
});

In these examples, the form is pre-populated with a title of "Hello World". You can replace this with any other data you want to pre-populate the form with. For more information, you can refer to the refine documentation (https://refine.dev/docs/packages/react-hook-form/use-modal-form#properties) or refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#properties). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

save

Did you find this page helpful?