React-admin | How to concat source inside ReferenceField

Question

I have a table "fos_user" and "version", I would like to display "9.0.1.A" instead of "/ version / 1".

=>fos_user https://i.stack.imgur.com/8z9LG.png

=>version https://i.stack.imgur.com/vCu9v.png

Is it possible to concatenate the fields of the "version" table to display it in the source, like this? https://i.stack.imgur.com/iKsWQ.png

Because it will prevent me from creating a new field in the "version" table.

Best regards,

i managed to do it with this code,i hope it will be useful to someone: https://i.imgur.com/NMLLcM8.png — Peacefull, Jul 19 '18 at 09:33
Very nice implementation. You can write the solution as answer of your question and mark it a "resolved your question"! — Kmaschta, Jul 19 '18 at 16:24
Here is some help: https://stackoverflow.com/help/self-answer — Kmaschta, Jul 26 '18 at 16:16

score 3 · Accepted Answer · answered Jul 27 '18 at 06:54

React-admin | How to concat source inside ReferenceField ?

Answer:

<ReferenceField label="Version" source="version" reference="versions"> <FunctionField render={version => `${version.major}.${version.minor}.${version.patch}.${version.letter}`} /> </ReferenceField>

score 1 · Answer 2 · answered Apr 13 '20 at 13:16

I needed a prefix for images. Unfortunatelly the provided solution didn't work for me... At first I tried

<ImageField source="prefix + contentUrl"/>

and the solution above...

Eventually I found following solution:

const MyImageField = ({source, record = {}, ...rest}) => {
    let clonedRecord = JSON.parse(JSON.stringify(record));
    clonedRecord[source] = process.env.REACT_APP_BASE_PATH + clonedRecord[source];
    return <ImageField source={source} record={clonedRecord} {...rest}/>;
};

export const ImageList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <MyImageField source="contentUrl"></MyImageField>
        </Datagrid>
    </List>
);

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser);

export default () => (
    <HydraAdmin dataProvider={dataProvider} authProvider={authProvider} entrypoint={entrypoint}>   
        <ResourceGuesser name={"media_objects"} list={ImageList}/>
    </HydraAdmin>
);

Somehow i needed a clone, because the function was called multiple times (-> prefix was added x times).

I use this in combination with the API Platform.

Also see:

https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component

score 0 · Answer 3 · answered Nov 26 '21 at 00:43

From https://marmelab.com/react-admin/Fields.html#reference-fields

Tip: If you want to display data from more than one field, check out the <FunctionField>, which accepts a render function:

import { FunctionField } from 'react-admin';

<FunctionField
    label="Name"
    render={record => `${record.first_name} ${record.last_name}`}
/>;

So for your case, it would be:

import { FunctionField } from 'react-admin';

<FunctionField
    label="Name"
    render={version => `${version.major}.${version.minor}.${version.patch}.${version.letter}`}
/>;

React-admin | How to concat source inside ReferenceField

3 Answers3

Linked