A value in a ChipField keeps disappearing after 1 second, after first render.
<ArrayField source="kpi">
<SingleFieldList>
<TextField source="title" reference="kpi.title" />
</SingleFieldList>
</ArrayField>
This is the data
"kpi": [
{
"id": 3,
"title": "Test",
"goal": "1000",
"currentvalue": "2",
"startvalue": "1",
"importance": 99
}
],
We are able to get the id to stay but we cant make it work with any of the other data.
If we only write kpi instead of kpi.title, it shows the id.
Maybe you could use only
<TextField source="title" />
There is no need for reference.
Also, try ChipField, see docs
Related
I'm fairly new to React Native. I have successfully fetched the required array through axios.post, in the following format:
"hospitals": [
{
"title": "Holy Family Hospital Rawalpindi",
"distance": "71.45372179866516"
},
{
"title": "Fauji Foundation Hospital Islamabad",
"distance": "62.242918533343705"
},
{
"title": "PIMS Hospital Islamabad",
"distance": "80.0576175928936"
}
I'm trying to display only the titles in a dropdown list and continuously failing. I just dont know the correct format/protocol for this (ie how to use individual values). Any help would be appreciated.
https://reactnative.dev/docs/picker
I think u wanna use that.
just map the items. like that:
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
data.map((data)=>{
return( <Picker.Item label=data.title value=data.title />)
})
</Picker>
Input json for Person - has a xrefAccounts{key,value} map
In the column "SubSys", I want to display "LIBRARY" and "SPORTS" as tags.
The Person json object has all the values required, but I can't figure out how to map it in DataGrid component.
I'm using react-admin 3.10
[{
...
"xrefAccounts": {
"LIBRARY": {
"id": "1",
"xrefSystemId": "LIBRARY"
},
"SPORTS": {
"id": "1",
"xrefSystemId": "SPORTS"
}
}
},
export const PersonList = props => (
<List filters={<PersonFilter />} {...props} >
<Datagrid rowClick="edit">
...
<ReferenceArrayField label="SubSys" reference="id" source="xrefAccounts.value">
{/* Find how to put multiple xref in one column SubSys */}
<SingleFieldList>
<ChipField source="value.xrefSystemId" />
</SingleFieldList>
</ReferenceArrayField>
<EditButton />
</Datagrid>
</List>
);
I want to display SubSys ["Library" "Sports"] similar to Tags["Sport" "Code" ]in this image
It doesn't work because you're using ArrayField on data which is not an array - it is an object!
So the best thing would be actually to fix your API response structure.
But ... if you can't do so - as I look at your attempt maybe I can suggest the following workaround via custom field component:
<XrefAccountsField source="xrefAccounts" />
inside
const XrefAccountsField = ({source, record = {}}) => {
const accountsObject = record[source];
// Convert the record to an array
const accounts = {
accountsArr: accountsObject ? Object.keys(accountsObject).map((key) => accountsObject[key]) : []
};
return (
<ArrayField source="accountsArr" record={accounts}>
<SingleFieldList>
<ChipField source="xrefSystemId" />
</SingleFieldList>
</ArrayField>
)
}
The following snippet inside an Edit context creates an Array as listed below.
import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admin';
<ArrayInput source="backlinks">
<SimpleFormIterator>
<DateInput source="date" />
<TextInput source="url" />
</SimpleFormIterator>
</ArrayInput>
JSON:
{
"id": 123,
"backlinks": [
{
"date": "2012-08-10T00:00:00.000Z",
"url": "http://example.com/foo/bar.html",
},
{
"date": "2012-08-14T00:00:00.000Z",
"url": "https://blog.johndoe.com/2012/08/12/foobar.html",
}
]
}
Is there a way to achieve the same for a single item? Something like a reference field but without the feature to select an existing item. Rather the user should need to create one like in the example above.
You don't need a special input component, react-admin inputs let you edit nested objects by default by specifing the path in the source prop
<DateInput source="backlink.date" />
<TextInput source="backlink.url" />
Hope this solves the problem.
I'm trying to get a react-select's multi-select component to submit the selected values as an array of strings but it's coming out as an array of {label, value} objects.
The structure of the objects I will be passing into react-select via react-final-form's Field component is like this:
[
{ val: "first-value", display: "First Value" },
{ val: "second-value", display: "Second Value" },
{val: "third-value", display: "Third Value"
];
Passing the prop getOptionLabel={option => option.display} is able to change the option labels to the display key given by the objects.
However doing the same thing for getOptionValue still gives me the entire {val, display} object when submitted. e.g. selecting the first item and submitting the form would get me [{val: "first-value", display: "First Value" }] when I only want ["first-value"]
I'm not too sure if it's something I need to solve on react-final-form or on react-select
import React from "react";
import { Field } from "react-final-form";
import { Form } from "react-final-form";
import Select from "react-select";
const data = [{ val: "1", display: "123" }, { val: "2", display: "321" }];
const Test2: React.FC<any> = () => {
return (
<Form
onSubmit={values => console.log(values)}
showErrorModal={showErrorModal}
setShowErrorModal={setShowErrorModal}
>
{() => (
<>
<Field
name="test"
component={MultiSelect}
label={"Multi Select test"}
placeholder="Please Select..."
options={data}
getOptionLabel={option => `${option.display}`}
getOptionValue={option => `${option.val}`}
/>
<SubmitButton btnTxt="next" />
</>
)}
</Form>
);
};
export default Test2;
When submitting, the message I get on the console is
[{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]
whereas the result I'm hoping for is
["1","2"]
getOptionLabel & getOptionValue are only for viewing purpose.
When we get the selected value, it will give you the complete object as we provided array of object to options.
So the result of,
onSubmit={values => console.log(values)}
is correct, which is [{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]
You need to further work on this result to get your desired result as,
onSubmit={values => console.log(values.map(data=>data.val))}
I have two endpoints
api/instruction
api/subject
from my server, model Instructions has a reference field called subject.
On my react-admin frontend, I'd like to CREATE(CRUD) a new Instruction instance.
Following this tutorial I have implemented my InstructionCreate as below
export const InstructionCreate = (props) => (
<Create title="New Instruction"{...props}>
<SimpleForm>
<ReferenceInput label="Subject" source="subject" reference="subject/">
<SelectInput optionText="name" />
</ReferenceInput>
</SimpleForm>
</Create>
When I render my Create component, from chrome console, under networktab, I can see a list of subject objects returned.
The list has two objects(pulled from server) and the objects have a property 'name'
However, i get a console error
Uncaught TypeError: Cannot read property 'data' of undefined
The above error occurred in the
In case one needs my app.js, from which I can successfully CRUD the api/subject endpoint
const App = () => (
<Admin
dataProvider={dataProvider}
<Resource name="subject" title="Subjects" list={SubjectList} create={SubjectCreate} edit={SubjectEdit} icon={GroupIcon}/>
<Resource name="instruction" title="Instructions" list={InstructionList} edit={InstructionEdit} create={InstructionCreate} icon={InstructionIcon}/>
</Admin>
);
GET api/subject - returns a list of dictionaries
[
{
"id": 2,
"name": "Subject 2"
},
{
"id": 1,
"name": "Subject 1"
}
]
I was able to solve this.
The error was on my side for including a trailing '/' on the reference var
Changed this line
<ReferenceInput label="Subject" source="subject" reference="subject/">
to
<ReferenceInput label="Subject" source="subject" reference="subject">