How to modify header button
On the Edit page for a resource there is a button at the top that redirects you to that resource's list route. How can I modify this button's redirect path?
8 Replies
Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The redirection path of the Edit button in Refine is determined by the
resource
property and its edit
action path. By default, the <EditButton>
uses the inferred resource from the route.
Here's an example of how you can use the EditButton
:
In this example, clicking the button will trigger the edit
method of useNavigation
and then redirect the app to the edit
action path of the resource, filling the necessary parameters in the route.
However, if you want to modify the redirection path, you would need to customize the edit
action path for the resource in the <Refine>
component's resources
property. Here's an example:
In this example, the edit
action path for the categories
resource is set to /custom-path/:id
. So, when you click the Edit button for a category, it will redirect to this custom path instead of the default /categories/edit/:id
path.
Please note that this will only take effect if the RefineRoutes
component is used in the app to render the routes. When using the legacy router provider, only the component values will be used. Custom paths are not supported.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricot•15mo ago
@kapa.ai I am not talking about the edit button, I am talking about the buttons inside the header props of the edit page
Let me check the knowledge base for you. One moment! :books:
----------------------
The buttons in the header of the Edit page can be customized using the
headerButtons
property. This property accepts a React.ReactNode
or a render function which you can use to keep the existing buttons and add your own.
Here's an example of how you can customize the header buttons:
In this example, a custom button is added to the header alongside the default buttons. You can replace {defaultButtons}
with your own buttons to completely customize the header.
If you want to modify the redirect path of the List button in the header, you would need to create a custom List button and use the useNavigation
hook to navigate to your custom path when the button is clicked.
Here's an example:
In this example, the default List button is replaced with a custom button that redirects to /custom-path
when clicked.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/chakra-ui/components/basic-views/edit).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricot•15mo ago
@kapa.ai What is the other button called that sends you back to the list view
Let me check the knowledge base for you. One moment! :books:
----------------------
The button that redirects you back to the list view is called the
ListButton
. This button is included by default in the header of the Edit
and Show
components. When clicked, it triggers the list
method of useNavigation
and redirects the app to the list
action path of the resource.
Here's an example of how it's used in the Edit
component:
In this example, {defaultButtons}
includes the ListButton
. If you want to customize the ListButton
, you can replace {defaultButtons}
with your own implementation of the ListButton
.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/antd/components/basic-views/edit).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below