You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: admin/advanced-customization.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -296,7 +296,7 @@ With these simple changes we already get a more appealing form layout:
296
296
297
297
Speaking of tabbed layout, a common pattern is to display related records in a dedicated tab of the show view of the main record.
298
298
299
-
For instance, let's leverage the [`<TabbedShowLayout>`](https://marmelab.com/react-admin/TabbedShowLayout.html) component provided by `react-admin` to display the reviews of a book in a dedicated tab.
299
+
For instance, let's leverage the [`<TabbedShowLayout>`](https://marmelab.com/react-admin/TabbedShowLayout.html) component provided by React Admin to display the reviews of a book in a dedicated tab.
300
300
301
301
We will also leverage `<ReferenceArrayField>` to fetch the related reviews of a book, and `<SimpleList>` to display them in a list.
302
302
@@ -451,4 +451,4 @@ Here are some examples, from the simplest to the most complete solutions:
React Admin already includes 230+ hooks and components. And it always allow you to make your own, thanks to the building blocks it provides. Feel free to read through its [All Features](https://marmelab.com/react-admin/Features.html) documentation page to discover them all.
454
+
React Admin already includes 230+ hooks and components. And it always allows you to make your own, thanks to the building blocks it provides. Feel free to read through its [All Features](https://marmelab.com/react-admin/Features.html) documentation page to discover them all.
Copy file name to clipboardExpand all lines: admin/customizing.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -90,13 +90,13 @@ Here is the result:
90
90
91
91
By default, `<ResourceGuesser>` will render a `<ListGuesser>` component as the list view for a resource.
92
92
93
-
Again, this component will automatically introspect the API schema and generate a list view with all the fields of the resource.
93
+
This component will automatically introspect the API schema and generate a list view with all the fields of the resource.
94
94
95
95

96
96
97
97
This is already usable, but may not provide the best user experience yet.
98
98
99
-
Here, too, to start customizing the list view, you can look at the DevTools console. You will see messages like this:
99
+
To start customizing the list view, you can look at the DevTools console. You will see messages like this:
100
100
101
101
```txt
102
102
If you want to override at least one field, create a BookList component with this content:
@@ -182,7 +182,7 @@ And here is the result:
182
182
183
183
## Customizing the `<ShowGuesser>`
184
184
185
-
Following the same principles (including looking at the DevTools console) we can customize the show view.
185
+
Following the same principles as the `<ListGuesser>`(including looking at the DevTools console) we can customize the show view.
186
186
187
187
In the following example, the show view for the `books` resource was customized to make the label of the `isbn` field uppercase:
188
188
@@ -241,7 +241,7 @@ const ReviewShow = () => (
241
241
242
242
Customizing the `<EditGuesser>` and `<CreateGuesser>` is very similar to customizing the `<ShowGuesser>`.
243
243
244
-
Again, we can start by looking at the DevTools console to get the initial code of the components.
244
+
We can start by looking at the DevTools console to get the initial code of the components.
245
245
246
246
```txt
247
247
If you want to override at least one input, create a ReviewEdit component with this content:
@@ -299,7 +299,7 @@ Here is the result:
299
299
300
300

301
301
302
-
**Tip:** Here, we leveraged the `multiline` and `readOnly` props of the `<InputGuesser>` component. But you can use any [common input prop](https://marmelab.com/react-admin/Inputs.html#common-input-props) supported by react-admin[Inputs](https://marmelab.com/react-admin/Inputs.html) on them.
302
+
**Tip:** Here, we leveraged the `multiline` and `readOnly` props of the `<InputGuesser>` component. But you can use any [common input prop](https://marmelab.com/react-admin/Inputs.html#common-input-props) supported by React Admin[Inputs](https://marmelab.com/react-admin/Inputs.html) on them.
303
303
304
304
## From `<InputGuesser>` To React Admin Inputs
305
305
@@ -336,7 +336,7 @@ const ReviewsEdit = () => (
336
336
337
337
## Next Step
338
338
339
-
The above examples limit to customizing the various API Platform Admin Guessers, but this is just the tip of the iceberg.
339
+
The above examples are limited to customizing the various API Platform Admin Guessers, but this is just the tip of the iceberg.
340
340
341
341
By leveraging React Admin components and props, you can go much further in customizing the generated pages.
Copy file name to clipboardExpand all lines: admin/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ API Platform Admin is a Single Page Application (SPA), based on [React Admin](ht
23
23
24
24
Thanks to its built-in **guessers**, API Platform Admin parses the API documentation then uses React Admin to expose a nice, responsive management interface (Create-Retrieve-Update-Delete, i.e. CRUD) for all documented resource types.
25
25
26
-
Afterwards, you can **customize everything** by using the numerous components provided [React Admin](https://marmelab.com/react-admin/documentation.html) and [MUI](https://mui.com/), or even writing your own [React](https://reactjs.org/) components.
26
+
Afterwards, you can **customize everything** by using the numerous components provided by [React Admin](https://marmelab.com/react-admin/documentation.html) and [MUI](https://mui.com/), or even writing your own [React](https://reactjs.org/) components.
0 commit comments