ratty-blush•17mo ago

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

7 Replies

kapa.ai•17mo 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•17mo ago

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

ratty-blush•17mo 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

unwilling-turquoise•17mo 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.

ratty-blush•17mo ago

Okay so I can use form.setFieldValue in the onSuccess callback?

unwilling-turquoise•17mo ago

you can 🤙🏻

ratty-blush•17mo ago

Thanks a lot! I will try that