Based on this link: https://github.com/marmelab/admin-on-rest/blob/master/docs/Fields.md and the section that explains
My List component display the loading bar indefinitely and my suspicious is that my array is not a primitive array.
The sample uses this array:
{
id: 1234,
title: 'Lorem Ipsum',
tag_ids: [1, 23, 4]
}
Mine uses:
{
id: 1234,
title: 'Lorem Ipsum',
tag_ids: [
{
"id": "fa4aca34-b687-4b2e-987e-dae9db379807",
"amount": 111.04
}]
}
Is this a problem? of does this support complex arrays?
This is how I call it within a list:
<List {...props} title="my title"
filters={<UserFilter />}
// actions={<PostActions />}
>
<Datagrid>
<TextField source="street" label="Address"/>
<TextField source="city" label="City"/>
<BooleanField source="isBlocked" label="Blocked" />
<TextField source="postcode" label="ZIP"/>
<EditButton />
<ShowButton />
<ReferenceArrayField label="Invoices" reference="invoices" source="invoices">
<Datagrid>
<TextField source="id" />
<TextField source="invoiceNumber" />
</Datagrid>
</ReferenceArrayField>
</Datagrid>
</List>
I will appreciate any guidance in here in advance.
You are using the depreciated Admin-on-Rest. Please use the much improved React-Admin.
ArrayField is what you are looking for.
Related
I have this long descriptions in my React-admin :
I would like to set a substring on this field like this : .substring(0, 50)} + "..." but I don't know where to do this. Anyone know ?
Try the sx prop:
<Datagrid>
<TextField source="title" />
<TextField source="description" sx={{
maxWidth: '20em',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}} />
</Datagrid>
More details at https://marmelab.com/react-admin/Fields.html#sx
Currently, if I try to place a Field into an Edit form, the field doesn't display at all. There is no errors in the console or the terminal about why it wont.
Example:
<Edit undoable={false} {...props}>
<SimpleForm>
<FormRow>
<TextField source="id"/>
<TextField source="name"/>
</FormRow>
</SimpleForm>
</Edit>
will not display either of these on the page load, it will simply be blank.
Is there any way to use fields in the Edit form?
You need to pass in the record prop (and basePath if its a reference).
The Edit component does not get the record prop so create a form component and it will get passed the record as a prop
eg.
const ProjectEdit: FC<EditComponentProps> = props => {
const classes = useStyles();
return (
<RA.Edit {...props} title={<ProjectTitle />}>
<RA.SimpleForm>
<ProjectForm />
</RA.SimpleForm>
</RA.Edit>
);
};
export const ProjectForm = (props: any) => {
return (
<Box flex={1} mr={{ md: 0, lg: '1em' }}>
<RA.TextInput source="name" fullWidth={true} />
<Typography variant="h6" gutterBottom>
Tasks
</Typography>
<RA.TextField
source="name"
fullWidth={true}
record={props.record}
/>
<RA.ReferenceManyField
label="Tasks"
reference="Task"
target="projectId"
fullWidth={true}
record={props.record}
basePath="/Task"
>
<RA.SingleFieldList fullWidth={true}>
<RA.ChipField source="name" fullWidth={true} />
</RA.SingleFieldList>
</RA.ReferenceManyField>
</Box>
);
};
Is possible to have JSX code inside the Accordion content in native base?
class MyAccount extends React.Component {
render() {
const creditCardContent = (
<Form>
<Item floatingLabel>
<Label>Name on Card</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>Card Number</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>CVC</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>Zip Code</Label>
<Input />
</Item>
</Form>
);
const dataMenus = [
{ title: "Credit Card", content: creditCardContent },
{ title: "Bank Account (for ACH payments)", content: "Lorem ipsum dolor sit amet" },
{ title: "Recurring Payment", content: "Lorem ipsum dolor sit amet" }
];
return (
<Container>
<Content padder>
<ScrollView>
<Accordion dataArray={dataMenus} expanded={0}/>
</ScrollView>
</Content>
</Container>
);
}
}
The result is not showing the Credit Card content (image below)
I'm not sure if I am doing something wrong or it is not possible to do.
Thanks
As far as I remember you can do it with the renderContent property where you can define how it should be rendered. You can pass it as a constant or as a renderContent = (item) => { ... }.
But what you are doing right now is supplying the dataArray with React.Element and then bunch of strings which it can't render.
I'd like to know what are the data I'm working with, when using react-admin. (see them in the console to help debug)
For instance, when I'm working with a List:
import React from 'react';
import { Datagrid, List, TextField } from 'react-admin';
import { ListProps } from '../../types/admin/ListProps';
const ProductList = (props: ListProps): JSX.Element => {
console.log('ProductList.props', props);
return (
<List
{...props}
sort={{
field: 'titleEN',
order: 'DESC',
}}
>
<Datagrid rowClick="edit">
<TextField source="title" />
<TextField source="titleEN" label={'Title (EN)'} />
<TextField source="titleFR" label={'Title (FR)'} />
{/*<ArrayField source="images"><SingleFieldList><ChipField source="id" /></SingleFieldList></ArrayField>*/}
{/*<ReferenceArrayField source="imagesIds" reference="images"><TextField source="id" /></ReferenceArrayField>*/}
<TextField source="customer.label" label={'Customer'} />
<TextField source="price" />
</Datagrid>
</List>
);
};
export default ProductList;
How can I do that? I haven't found anything in the official doc https://marmelab.com/react-admin/List.html
This kind of logging can be displayed through the Data Provider. See https://marmelab.com/react-admin/DataProviders.html
For instance, with https://github.com/marcantoine/ra-data-graphql-prisma data provider, one such implementation could be https://github.com/UnlyEd/ra-data-graphql-prisma/commit/4031c5c3f2e97c479a9714df56da06653a908444
I'm trying to access nested values in a REST API array within the LIST VIEW of a React-Admin project. In short I'm trying to do something like "Array.item" when passing it to a component that renders it.
I've got my data populating like so:
Each messages array looks like this, so here's one of them:
for (let i = 0; i < 13; i++) {
data.messagesDirect.push({
id: i,
read: faker.random.boolean(),
date: faker.date.past(),
subject:
faker.name.jobDescriptor() +
' ' +
faker.name.jobArea() +
' ' +
faker.name.jobType(),
content: faker.lorem.paragraph(),
email:
faker.internet.email() +
' - ' +
faker.name.firstName() +
' ' +
faker.name.lastName()
});
}
And then I put them in one array in the end.
data.messages.push({
id: 0,
inbox: data.messagesInbox,
outbox: data.messagesOutbox,
direct: data.messagesDirect
});
data.messagesInbox,outbox and direct are generic arrays, they contain the same type of data.
I'm trying to access each array individually, and pass that information to be rendered by a component made to render these arrays.
export const MessagesList = props => (
<FullWidthTabs>
<List actions={<InboxListActions />} {...props}>
<MessagesGrid data="messages.inbox" />
</List>
<List actions={<OutboxListActions />} {...props}>
<MessagesGrid data="messages.outbox" />
</List>
<List actions={<DirectListActions />} {...props}>
<MessagesGrid data="messages.direct" />
</List>
</FullWidthTabs>
);
No matter what it keeps passing the context of the array as if it's only at the top level, it's never passing the exact array object I'm referencing with the "."
I am doing this wrong, and I need understanding and guidance on how to do this right.
Messages grid just expects an array to iterate through and create UI for each item.
const MessagesGrid = ({ data, basePath, resource }) =>
console.log(data) || (
<div style={{ margin: '1em' }}>
{data.map(id => (
<Card key={id} style={cardStyle}>
<ReadField record={data[id]} source="confirmed" />
<CardHeader
title={<TextField record={data[id]} source="subject" />}
subheader={<DateField record={data[id]} source="date" />}
/>
<CardContent>
<TextField record={data[id]} source="content" />
</CardContent>
...
Figured it out, doing it like this, by wrapping them in Datagrids and using ArrayField it was able to step into each array:
export const MessagesList = (props, resource) => (
<FullWidthTabs>
<List actions={<InboxListActions />} {...props}>
<Datagrid>
<ArrayField source="inbox">
<MessagesGrid />
</ArrayField>
</Datagrid>
</List>
<List actions={<OutboxListActions />} {...props}>
<Datagrid>
<ArrayField source="outbox">
<MessagesGrid />
</ArrayField>
</Datagrid>
</List>
<List actions={<DirectListActions />} {...props}>
<Datagrid>
<ArrayField source="direct">
<MessagesGrid />
</ArrayField>
</Datagrid>
</List>
</FullWidthTabs>
);