When I use the referencinput, it sends a request to the server, is it possible to somehow read what I received from the referencinput server and use these values in the farthest. Thank you for any help!
<ReferenceInput
label="Person"
source={`${parentSourceWithIndex}.person.id`}
reference="people"
resource={resource}
perPage={INPUT_ITEMS_PER_PAGE}
>
<SelectInput
onChange={(event) => console.log(event)}
resource={resource}
optionText="fullName"
inputType="create"
fullWidth
/>
</ReferenceInput>
I suggest you to read the first two paragraphs of the ReferenceInput documentation:
https://marmelab.com/react-admin/ReferenceInput.html
As well as the linked useChoicesContext documentation:
https://marmelab.com/react-admin/useChoicesContext.html
Related
I'm using react-admin v3.15 (because reasons). I am trying to create a simple Create form that populates a dropdown with values from a resource. For some reason I have a one dropdown that works and another that does not. They call different APIs but they literally return similar things. What are some things that might be implicitly known that I have to watch out for that might cause this?
export const CreateFormTest = () => {
return (
<SimpleForm>
<ReferenceInput
label="Foo 1"
source="foo1"
reference="foo1"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
<ReferenceInput
label="Foo 2"
source="foo2"
reference="itemResource"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
</SimpleForm>
);
}
I've checked the network calls and they literally return the same headers, body, etc. The resource are there too. There is a dataProvider function that manipulates the request / response but nothing that should affect the working endpoint specifically.
Any help / hints or common things to look out for when doing this would be appreciated.
I have my <ReferenceField> where I get some data to work with. In this case, I get attribute odata.type from my API. I want my <TextField> to display this attribute but I want to slightly modify the output that is displayed. Right now the attribute is displayed like this: HardwareDatabase.CPU. Basically I need to modify this output to be liek this: CPU.
Here is my code I described earlier:
<ReferenceField label="Type" source="id" reference="Hardware">
<TextField source="odata.type"/>
</ReferenceField>
Any ideas how can I modify the output of the field?
Thank you in advance.
Try this:
<ReferenceField label="Type" source="id" reference="Hardware">
<FunctionField label="Name" render={record => record ? record["odata.type"].split(".")[1] : null} />
</ReferenceField>
Use the FunctionField:
<ReferenceField label="Type" source="id" reference="Hardware">
<FunctionField label="Name" render={record => record ? record.odata.type.split(".")[1] : null} />
</ReferenceField>
Documentation: https://marmelab.com/react-admin/Fields.html#functionfield
NOTE: Be aware that the record may be undefined if the fetch call made by react-admin hasn't been resolved yet. This happens because react-admin renders the UI immediatly with the data it may have in its redux store already (optimistic rendering). You'll have to check that record isn't undefined before accessing it
I have following code:
<Datagrid rowClick="edit">
<TextField source="id" label="Id" />
<TextField source="token" label="Token" />
<LinkResourceField
label="Company"
source="company.id"
reference={record =>
`${Pluralize.plural(get(record, 'company.category', 'company'))}`
}
display="company.name"
sortable={false}
/>
<TextField source="status" label="Status" />
<CloneButton />
</Datagrid>
CloneButton does show up but when I click it, it first goes to create page but then it ends up going to edit page for the record I clicked on.
Does anyone have any idea why this might be happening? Anyway to setup CloneButton so that it stops it from triggering rowClick?
Thanks for reading and your help.
Thanks for everyone for helping.
I was able to put up a bug & a PR to resolve this issue on react-admin.
https://github.com/marmelab/react-admin/pull/3006
This is now fixed with react-admin version 2.8.2.
Everyone's comments were super helpful and I wouldn't have been able to get here without it.
Also a big thank you to react-admin team for quickly approving and releasing a new version.
Could you not do this:
<CloneButton onClick={event => {
event.stopPropagation()
event.preventDefault()
// do something here
} />
AutocompleteInput is pretty good to use in react admin. However, is there a way to make it resettable? Thanks!
<ReferenceInput
label={translate('resources.cards.fields.search_name')}
source="id"
reference="cards"
alwaysOn
resettable
>
<AutocompleteInput optionText="name" inputValueMatcher={() => null} resettable />
</ReferenceInput>
I put resettable for both ReferenceInput and also AutocompleteInput but the reset button just doesn't show up. Thanks!
Unfortunately, no, it looks like it is not possible at this moment:
https://github.com/marmelab/react-admin/issues/2564
Here is the ref : Admin-on-Rest
in app.js :
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
in customer.js :
<TextInput source="firstname" />
<ReferenceInput label="Partner" source="id" reference="partners" >
<AutocompleteInput optionText="name" />
</ReferenceInput>
<TextInput source="email" />
The problem is autocomplete not shown, but I check in log data retrieved from API end point /partners
And if I change reference to reference="customers", data and autocomplete shown.
Help please ??
You need another <Resource> for the relationship, even empty:
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
<Resource name="partners" />
It is well documented for <ReferenceField> (see the note), perhaps it needs the same note for <ReferenceInput>.
You <ReferenceInput reference="..."> needs to match the <Resource name="..."> for this to work. So this is the reason why reference="customers" worked for you.
If you want to get data from customers endpoints, but you want the label to be Partner you can specify it as label attribute on your ReferenceInput component, e.g. <ReferenceInput label="Partner" ...>.
The problem is probably the way you're importing your 'ReferenceInput' object. I had the same issue while creating my app and had no idea what is the problem.
Check your import line and if it looks like this:
import {ReferenceInput} from "../../src/mui/input/ReferenceInput";
then change it to look this way:
import ReferenceInput from '../../src/mui/input/ReferenceInput';
Hope that helps you!