Is there a way to use an if statement before showing the show page?

Question

Is there a way to do an if statement before showing the show page? For instance if the id of the element I clicked on with the show button end with ".log" I want to have the show page look like this:

export const reportShow = ({ ...props }) => (
<Show title="Log" {...props}>
    <SimpleShowLayout>
        <ReferenceManyField label="Log" reference="archivedfiles" target="id">
            <Datagrid>
                <TextField source="id" label="Line" />
                <TextField source="timestamp" label="Timestamp" />
                <TextField source="severity" label="Severity" />
                <TextField source="message" label="Message" />
            </Datagrid>
        </ReferenceManyField>
    </SimpleShowLayout>
</Show>);

But if the id ends with .txt I want the show page to show a Report page which would have this:

export const reportShow = ({ ...props }) => (
<Show title="Report" {...props}>
    <SimpleShowLayout>
                <TextField source="id" label="Report Name" />
                <TextField source="rmessage" label="Message" />
    </SimpleShowLayout>
</Show>);

What would be the best way to go about this?

score 0 · Answer 1 · answered May 25 '17 at 16:58

0

Maybe the aor-dependent-input addon can help you with that.

answered May 25 '17 at 16:58

Gildas Garcia

6,966
3
15
29

If i were to use DependentInput how would I say if( id ends with .txt) {... } ? – Stebermon May 25 '17 at 18:06
I forgot this addon was designed for inputs and not fields. I'll see what we can do about that – Gildas Garcia May 29 '17 at 07:15
FYI, I just released a new version of the [aor-dependent-input](https://github.com/marmelab/aor-dependent-input) addon which now provides an `DependentField` component for views. Use it with the `resolve` prop to check constraints in the `id` field – Gildas Garcia May 30 '17 at 10:07
Do you have an example on how to use DependentField? The link you gave seems to only have DependentInput examples. @Gildas – Stebermon May 30 '17 at 21:39
Both components have the exact same props and can be used the same way – Gildas Garcia Jun 01 '17 at 06:04

Stebermon · Accepted Answer · 2017-07-03T18:13:59.813

I ended up getting this to work by doing this:

export const archivedShow = ({ ...props }) => {
    if (props.match.params.id.endsWith("txt")){
    return (<Show title="Report" {...props}>
        <SimpleShowLayout>
            <ReferenceManyField label="Report" reference="archivedfiles" target="id">
                <Datagrid>
                    <FormattedReportView/>
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
    </Show>
    );
    }
    else {
        return (
        <Show title="Log" {...props} filters={< LogFilter/>}>
            <SimpleShowLayout>
            <ReferenceManyField label="Log" reference="archivedfiles" target="id">
                <Datagrid>
                    <TextField source="id" label="Line" />
                    <TextField source="timestamp" label="Timestamp" />
                    <TextField source="severity" label="Severity" />
                    <TextField source="message" label="Message" />
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
        </Show>
        );
    }
}

Is there a way to use an if statement before showing the show page?

2 Answers2