diff --git a/docs/Fields.md b/docs/Fields.md index 9ee1dbac162..e8507d36c56 100644 --- a/docs/Fields.md +++ b/docs/Fields.md @@ -106,6 +106,17 @@ Then you can display the author first name as follows: ``` +**Tip**: If you want to display data from more than one field, check out [the ``](#functionfield), which accepts a `render` function: + +```jsx +import { FunctionField } from 'react-admin'; + + `${record.first_name} ${record.last_name}`} +/>; +``` + **Tip**: If you want to format a field according to the value, use a higher-order component to do conditional formatting, as described in the [Theming documentation](./Theming.md#conditional-formatting). **Tip**: If your interface has to support multiple languages, don't use the `label` prop, and put the localized labels in a dictionary instead. See the [Translation documentation](./Translation.md#translating-resource-and-field-names) for details. @@ -537,6 +548,17 @@ import { TextField } from 'react-admin'; ``` +**Tip**: If you want to display data from more than one field, check out [the ``](#functionfield), which accepts a `render` function: + +```jsx +import { FunctionField } from 'react-admin'; + + `${record.first_name} ${record.last_name}`} +/>; +``` + ### `` `` displays a url in a Material UI's `` component. @@ -1341,20 +1363,43 @@ PriceField.defaultProps = { ``` {% endraw %} -### Adding Label To Custom Field Components In The Show View +### Adding A Label To Custom Field Components -React-admin lets you use the same `Field` components in the `List` view and in the `Show` view. But if you use the `` custom field component defined earlier in a `Show` view, something is missing: the `Field` label. Why do other fields have a label and not this custom `Field`? And how can you create a `Field` component that has a label in the `Show` view, but not in the `List` view? +When you use one of the react-admin `Field` components in an `Edit`, `Create` or `Show` view, react-admin includes a label on top of the field value, as in the following example: -React-admin uses a trick: the `Show` view layouts (`` and ``) inspect their `Field` children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label. +![field labels](./img/field-addlabel.png) -That means that the only thing you need to add to a custom component to make it usable in a `Show` view is an `addLabel: true` default prop. +For your custom fields, however, the label doesn't appear by default. You need to opt in this feature by setting the `addLabel` prop to `true` in the `defaultProps`. + +```diff +const FullNameField = ({ record = {} }) => ( + + {record.firstName} {record.lastName} + +); -```js FullNameField.defaultProps = { - addLabel: true, + label: 'Name', ++ addLabel: true, }; ``` +React-admin uses a trick to make it work: the view layouts (``, ``, ``, ``) inspect their children, and whenever one has the `addLabel` prop set to `true`, the layout decorates the component with a label. + +If you don't use any of these layouts, the `addLabel` trick won't work. You'll have to add a label manually by decorating your field with [the `` component](./Inputs.md#using-labeled): + +```jsx +import { Labeled } from 'react-admin'; + +const MyShowLayout = ({ record }) => ( +
+ + + +
+); +``` + ### Hiding A Field Based On The Value Of Another In a Show view, you may want to display or hide fields based on the value of another field - for instance, show an `email` field only if the `hasEmail` boolean field is `true`. diff --git a/docs/img/field-addlabel.png b/docs/img/field-addlabel.png new file mode 100644 index 00000000000..980e94b3612 Binary files /dev/null and b/docs/img/field-addlabel.png differ