1

I have a List view where I want to render a ReferenceField field based on the value of the current row being rendered in the table that the Datagrid component creates.

How can I access the current row's data? (the values of the columns of the current row).

I tried record.processed but I get an error saying that the record object doesn't exist (processed is a column in the record that I want to check in order to format the field). I also tried resource.processed, this.props.processed, and this.props.record.processed with no success.

The piece of code that shows what I'm trying to do is the following:

<List title="Sales Inquiries" filter={{ request_type: 'sales' }}  {...props}>
      <Datagrid>
          <TextField source="id" />
          <TextField source="firstname" label="First Name" />
          <TextField source="lastname" label="Last Name" />
          <TextField source="company" />
          <TextField source="email" />
          <DateField source="timestamp" label="Received" />

          {record.processed ?
            <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
              <TextField source="username" />
            </ReferenceField>
          : <span>Nobody</span> }

          <ShowButton />
      </Datagrid>
  </List>

EDIT

Did as suggested by @kunal pareek Applied a HOC to the ReferenceField field that modifies it in order to show the proper content as follows:

const CustomField = (props) => (
  <span>
    {props.record.processed ?
      <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
        <TextField source="username" />
      </ReferenceField>
    : <span>Nobody</span> }
  </span>
);
Chakir Mrabet
  • 15
  • 4

2 Answers2

1

the record is not really available at the location you want as a variable. It is passed to the component as a prop.

So you can do this. 

<List title="Sales Inquiries" filter={{ request_type: 'sales' }}  {...props}>
      <Datagrid>
          <TextField source="id" />
          <TextField source="firstname" label="First Name" />
          <TextField source="lastname" label="Last Name" />
          <TextField source="company" />
          <TextField source="email" />
          <DateField source="timestamp" label="Received" />
          <CustomField />

          <ShowButton />
      </Datagrid>
  </List>

const CustomField = (props) => (
          {props.record.processed ?
            <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
              <TextField source="username" />
            </ReferenceField>
          : <span>Nobody</span> }
)

Above is just a simple example. I have taken your code straight and reformatted it, so it might not work straightaway. But I have been using this method to change the values of my components in several places.

You can also use HOCs. You can find examples here

https://marmelab.com/admin-on-rest/Theming.html

kunal pareek
  • 1,285
  • 10
  • 21
0

The dependent-input addon can help you with that.

Gildas Garcia
  • 6,966
  • 3
  • 15
  • 29