Search code examples
admin-on-rest

ReferenceField keeps showing loading bar on null value

I have following List component where customerid and technicianid are ReferenceField. Sometimes I have technicianid as null. So the UI keeps showing the loading bar (as shown in the image below).

Question: How can I tell the ReferenceField to handle null and just show the empty string.

export const AppointmentList = (props) => (
    <List title="All Appointments" {...props}>
        <Datagrid>
            <ReferenceField source="customerid" reference="customers" label="Customer" >
                <TextField source="name" />
            </ReferenceField>
            <TextField source="name" label="Name" />
            <DateField source="scheduleddt" label="Schedule Date" />
            <ReferenceField source="technicianid" reference="technicians" label="Technician" >
                <TextField source="name" />
            </ReferenceField>
            <DateField source="createddatetime" label="Created" />
        </Datagrid>
    </List>
);

enter image description here

Solution

  • You'll need the 'allowEmpty' attribute.

    export const AppointmentList = (props) => (
    <List title="All Appointments" {...props}>
        <Datagrid>
            <ReferenceField source="customerid" reference="customers" label="Customer" >
                <TextField source="name" />
            </ReferenceField>
            <TextField source="name" label="Name" />
            <DateField source="scheduleddt" label="Schedule Date" />
            <ReferenceField source="technicianid" reference="technicians" label="Technician" allowEmpty>
                <TextField source="name" />
            </ReferenceField>
            <DateField source="createddatetime" label="Created" />
        </Datagrid>
    </List>
);

    https://marmelab.com/admin-on-rest/Inputs.html#referenceinput