Skip to content

[Chore] Sync tips from tips repository #10815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
djhi merged 2 commits into from
Jul 1, 2025
Merged

[Chore] Sync tips from tips repository #10815

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9358f22
Chore(tips): Sync tips from tips repository
jonathanarnault Jul 1, 2025
f705bfa
Fix links to react-admin-ee.marmelab.com in features
jonathanarnault Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions docs/assets/features.md_ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The `<ToggleThemeButton>` component lets users switch from light to dark mode, a

If you need horizontal space, switch the classic menu for an `<IconMenu>`. It renders a reduced menu bar with a sliding panel for second-level menu items. This menu saves a lot of screen real estate, and allows for sub menus of any level of complexity. #UI https://marmelab.com/react-admin/IconMenu.html

![IconMenu](https://react-admin-ee.marmelab.com/assets/ra-multilevelmenu-categories.gif)
![IconMenu](https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-categories.gif)
Copy link
Contributor

@djhi djhi Jul 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous URL was actually correct. Same for the others


---

Expand Down Expand Up @@ -54,7 +54,7 @@ When a form becomes too complex, organize the inputs in different sections with

To provide users visibility on their progression through a complex form, use the `<WizardForm>`. #form https://marmelab.com/react-admin/WizardForm.html

![WizardForm](https://react-admin-ee.marmelab.com/assets/ra-wizard-form-overview.gif)
![WizardForm](https://marmelab.com/ra-enterprise/modules/assets/ra-wizard-form-overview.gif)

---

Expand Down Expand Up @@ -118,7 +118,7 @@ With your admin getting bigger, or if you have to manage many resources and/or s

<video controls autoplay playsinline muted loop width="100%">
<source
src="https://react-admin-ee.marmelab.com/assets/breadcumb-nested-resource.mp4"
src="https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/breadcumb-nested-resource.webm"
type="video/webm"
/>
Your browser does not support the video tag.
Expand Down Expand Up @@ -177,7 +177,8 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
`<Edit>` is designed to be a page component, passed to the edit prop of the `<Resource>` component. But you may want to let users edit a record in a dialiog without leaving the context of the list page. If so, you can use the `<EditDialog>` component. #form https://marmelab.com/react-admin/EditDialog.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/edit-dialog.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand All @@ -186,7 +187,8 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
If you want to let users edit a record from another page, use the `<EditInDialogButton>` component. #form https://marmelab.com/react-admin/EditInDialogButton.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand Down Expand Up @@ -215,7 +217,8 @@ Use `<ReferenceOneInput>` in an `<Edit>` or `<Create>` view to edit a record lin
The `<Search>` component renders a global search input. It’s designed to be always accessible in the top `<AppBar>`. #ui https://marmelab.com/react-admin/Search.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-demo.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-demo.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand All @@ -234,7 +237,8 @@ The `<Configurable>` component makes another component configurable by the end u
In the case you want keep track of user actions, and get an overview of the activity of your admin, you can display event lists and audit logs with `<TimeLine>`, `<RecordTimeline>` and with `<EventList>` components. #activitylog #timeline #eventlog https://marmelab.com/ra-enterprise/modules/ra-audit-log

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-audit-log/latest/ra-audit-log-event-list.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-audit-log/latest/ra-audit-log-event-list.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-audit-log/latest/ra-audit-log-event-list.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand All @@ -252,7 +256,7 @@ To show more data from a resource without adding too many columns, you can show
With your admin getting bigger, the default sidebar menu might become too crowded. The `SolarLayout` is a beautiful alternative layout that help you organize your pages. #ui

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-solar-layout.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-solar-layout.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand All @@ -261,7 +265,8 @@ With your admin getting bigger, the default sidebar menu might become too crowde
If your app needs to display **events**, **appointments**, **time intervals**, or any other kind of time-based data, you can use the `<Calendar>` component. #ui https://marmelab.com/react-admin/Calendar.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-calendar.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand All @@ -279,7 +284,8 @@ If your app needs to display **events**, **appointments**, **time intervals**, o
The `<SearchWithResult>` component renders a search input and the search results directly below the input. It's ideal for dashboards or menu panels. #ui #search https://marmelab.com/ra-enterprise/modules/ra-search#searchwithresult

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-with-result-overview.mp4" type="video/mp4">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-with-result-overview.webm" type="video/webm">
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-with-result-overview.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Expand Down
65 changes: 58 additions & 7 deletions docs/assets/tips.md_ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1001,7 +1001,7 @@ With `<Datagrid>`, you can select a range of rows by pressing the shift key whil
---

If you need to customize the `<SolarLayout>` appBar that appears on Mobile, you can set the `appBar` prop of `<SolarLayout>`. For instance, here's how you could customize its colors and add some extra content to its far right.
#SolarLayout https://react-admin-ee.marmelab.com/documentation/ra-navigation#appbar-1
#SolarLayout https://marmelab.com/ra-enterprise/modules/ra-navigation#appbar-1

{% raw %}
```tsx
Expand Down Expand Up @@ -1226,6 +1226,34 @@ export const PostList = () => (

---

The `canAccess` helper function allows you to check if the current user has the permissions to execute an action. You can use it to disable desired links on a menu for instance. #Role-Based-Access-Control #RBAC https://marmelab.com/ra-enterprise/modules/ra-rbac#canaccess

```tsx
import { usePermissions, Menu } from "react-admin";
import { canAccess } from "@react-admin/ra-rbac";

const MyMenu = () => {
const { permissions } = usePermissions();
return (
<Menu>
<Menu.DashboardItem />
<Menu.Item
to="/categories"
primaryText="Categories"
disabled={
!canAccess({
permissions,
resource: "categories",
})
}
/>
</Menu>
);
};
```

---

If you render more than one `<DatagridConfigurable>` on the same page, you must pass a unique preferenceKey prop to each one. Do not forget to link their `<SelectColumnsButton>` components by giving them the same preferenceKey. #datagrid https://marmelab.com/react-admin/Datagrid.html#configurable

{% raw %}
Expand Down Expand Up @@ -2000,18 +2028,41 @@ You can add custom CSS classes to any column or cell in `DatagridAG` or `Datagri
{% raw %}
```tsx
const columnDefs = [
{ field: 'static', cellClass: 'my-class' },
{ field: 'staticArray', cellClass: ['my-class1','my-class2'] },
{ field: 'function', cellClass: params => params.value === 'something' ? 'my-class-1' : 'my-class-2' },
{ field: 'functionArray', cellClass: params => ['my-class-1','my-class-2'] },
// return same class for each row
{
field: 'static',
cellClass: 'my-class'
},
// return same array of classes for each row
{
field: 'staticArray',
cellClass: ['my-class1','my-class2'],
},
// return class based on function
{
field: 'function',
cellClass: params => {
return params.value === 'something' ? 'my-class-1' : 'my-class-2';
},
},
// return array of classes based on function
{
field: 'functionArray',
cellClass: params => ['my-class-1','my-class-2'],
},
// return array of classes based on many functions with `cellClassRules`
{
field: 'functionRules',
cellClassRules: {
// apply green to 2008
'rag-green-outer': params => params.value === 2008,
// apply blue to 2004
'rag-blue-outer': params => params.value === 2004,
// apply red to 2000
'rag-red-outer': params => params.value === 2000,
}
},
}
// return array of classes based on many functions with `cellClassRules`
{
field: 'simplifiedFunctionRules',
cellClassRules: {
Expand All @@ -2024,4 +2075,4 @@ const columnDefs = [
```
{% endraw %}

https://www.ag-grid.com/react-data-grid/cell-styles
https://www.ag-grid.com/react-data-grid/cell-styles
Loading