Populate selectfield from another form's result

Hey guys, been using v4 for a while now and it's great so far. I have a question in something I want to implent in a form and I'll do my best to explain it. I have resource1 and resource2, and in the create form for resource1 there is a selectfield to select resource 2. Next to the selectfield is a create button that opens a modal to create a record for resource2, and when that create form is submitted I want to automatically populate the selectfield with the record that is just created. Would appreciate any help on how to best implement this
kapa.ai
kapa.ai420d ago
Hey @ahnaf1022! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- To achieve this, you can use the useSelect hook provided by refine to fetch the data from resource2 and populate the select field in the create form for resource1. You can also use the useModalForm hook to create a modal for adding a new record to resource2. After submitting the create form for resource2, you can update the options in the select field to include the newly created record. Here's a basic outline of how you can implement this: 1. Use the useSelect hook to fetch data from resource2 and populate the select field in the create form for resource1:
const { selectProps: resource2SelectProps } = useSelect({
resource: "resource2",
});
const { selectProps: resource2SelectProps } = useSelect({
resource: "resource2",
});
2. Use the useModalForm hook to create a modal for adding a new record to resource2:
const { formProps, modalProps, show } = useModalForm("resource2");
const { formProps, modalProps, show } = useModalForm("resource2");
3. Add a create button next to the select field that opens the modal:
<Button onClick={show}>Create Resource2</Button>
<Button onClick={show}>Create Resource2</Button>
4. In the create form for resource2, after submitting the form, update the options in the select field to include the newly created record. You can achieve this by using the onSuccess callback of the useCreate hook in the create form for resource2:
const { formProps: createFormProps } = useCreate({
resource: "resource2",
onSuccess: () => {
// Update the options in the select field to include the newly created record
},
});
const { formProps: createFormProps } = useCreate({
resource: "resource2",
onSuccess: () => {
// Update the options in the select field to include the newly created record
},
});
For more information on the useSelect hook, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). For more information on the useModalForm hook, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm). ----------------------
kapa.ai
kapa.ai420d ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
like-gold
like-gold420d ago
can I populate the selectfield from the record instead of just adding the record to the options? Also, amazing how the ai almost completely understood my very confusing question
stormy-gold
stormy-gold420d ago
Hey @ahnaf1022, There are too many ways to do it. You can use “defaultValue” prop of <Select> component or you can use “form.setFieldValue” method of “useForm” return type to set value of your form. However, you don’t need to update your “useSelect” options. Because when you create a record, “useForm” automatically invalidate the related resource queries. If you create a sandbox, we can review and help with pleasure.
like-gold
like-gold420d ago
Okay so I can use form.setFieldValue in the onSuccess callback?
stormy-gold
stormy-gold420d ago
you can 🤙🏻
like-gold
like-gold420d ago
Thanks a lot! I will try that
More Posts
Steps to use localhost as a data provider?How to use localhost as a data provider? I have a restfull api backend running, but changing the datEdit Page fetches the Data from the REST API, but doesn't populate the form fields.Hi, I'm trying to create a Edit form for my card. I'm using `useForm` . But it isn't populating the Hi, How can I access the URL parameter?Hi, I'm trying to access the URL parameter in the 1st SS. It'll be used to fetch data. I've tried `ucookieshi all I use useTable useForm and another hooks to get the data from the backend in the backend (nodHelp with "Failed to resolve '@refinedev/inferencer/mantine"?Hi, I'm trying to adapt Refine into an existing React project (bundled by Parcel). I'm struggling towhite screen only in iPhoneHello! The problem I have is when I open my site using the ngrok url on iPhone I see a white screenCLI is not generating page?So i use the cli to create resource, yes it does create component for the resource but not page? so Swizzle of DataProviderHey Refine-Team, when I want to swizzle DataProvider, the console just displays the option to swizzlAdding routerProvider to Refine v4 errors with useLocation being used outside of a routerI am trying to upgrade my project to v4 and I've been having lots of issues. Right now trying to useAdd Refine to an existing React project?I'm wondering what the best way is to add Refine to an existing project. I tried adding the CLI, How to use Refine with JavascriptHello, What do I have to do to setup Refine to use JavaScript instead of typescript? I have checked Display success toast notificationI have created auth provider and i implemented login functionality .when I login it display toast uHow can I customize useRegister onSuccess error toast notification message?This is the refine V4 source code for useRegister hook. There is error handling, which by default thSupabase Set role upon signup or signInWithOAuthHi again everyone, How to set claim for role in Supabase when user signup with email and password orResource in useCustomMutation successNotification parameterHow do I access or pass a resource name into useCustomMutation? I use this hook to have a reorderingUse more than one Supabase Table on one PageHey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the s