FAQ

Can I have custom identifiers/primary keys for my resources?

Admin-on-rest requires that each resource has an id field to identify it. If your REST API uses a different name for the primary key, you have to map that name to id in a custom restClient. For instance, to use a field named _id as identifier:

const convertHTTPResponseToREST = (response, type, resource, params) => {
    const { headers, json } = response;
    switch (type) {
    case GET_LIST:
        return {
            data: json.map(resource => { ...resource, id: resource._id } ),
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        };
    case UPDATE:
    case DELETE:
    case GET_ONE:
        return { ...json, id: json._id }; 
    case CREATE:
        return { ...params.data, id: json._id };
    default:
        return json;
    }
};

I get warning about unique key for child in array

When displaying a Datagrid component, you get the following warning:

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of DatagridBody.

This is most probably because the resource does not have an id property as expected by admin-on-rest. See the previous FAQ to see how to resolve this: Can I have custom identifiers/primary keys for my resources?

A form with validation freezes when rendering

You’re probably using validator factories directly in the render method of your component:

export const CommentEdit = ({ ...props }) => (
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <DateInput source="created_at" />
            <LongTextInput source="body" validate={minLength(10)} />
        </SimpleForm>
    </Edit>
);

Avoid calling functions directly inside the render method:

const validateMinLength = minLength(10);

export const CommentEdit = ({ ...props }) => (
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <DateInput source="created_at" />
            <LongTextInput source="body" validate={validateMinLength} />
        </SimpleForm>
    </Edit>
);

This is related to redux-form.

How can I customize the UI depending on the user permissions?

Some fairly common use cases which may be dependent on the user permissions:

  • Specific views
  • Having parts of a view (fields, inputs) differents for specific users
  • Hiding or displaying menu items

For all those cases, you can use the aor-permissions addon.

How can I customize forms depending on its inputs values?

Some use cases:

  • Show/hide some inputs if another input has a value
  • Show/hide some inputs if another input has a specific value
  • Show/hide some inputs if the current form values matches specific constraints

For all those cases, you can use the aor-dependent-input addon.