correct-apricot•15mo ago

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

kapa.ai•15mo ago

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:

import { EditButton } from "@refinedev/antd";  
  
const MyEditComponent = () => {  
 return (  
 <EditButton  
 resource="categories"  
 recordItemId="123"  
 />  
 );  
};

import { EditButton } from "@refinedev/antd";  
  
const MyEditComponent = () => {  
 return (  
 <EditButton  
 resource="categories"  
 recordItemId="123"  
 />  
 );  
};

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:

<Refine resources={[{
  name: "categories",
  list: CategoriesList,
  edit: {
    component: CategoriesEdit,
    path: "/custom-path/:id"
  }
}]} />

<Refine resources={[{
  name: "categories",
  list: CategoriesList,
  edit: {
    component: CategoriesEdit,
    path: "/custom-path/:id"
  }
}]} />

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: ----------------------

kapa.ai•15mo ago

<@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

kapa.ai•15mo ago

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:

import { Edit } from "@refinedev/chakra-ui";  
import { Button, HStack } from "@chakra-ui/react";  
  
const PostEdit: React.FC = () => {  
 return (  
 <Edit  
 headerButtons={({ defaultButtons }) => (  
 <HStack>  
 {defaultButtons}  
 <Button colorScheme="red">Custom Button</Button>  
 </HStack>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { Edit } from "@refinedev/chakra-ui";  
import { Button, HStack } from "@chakra-ui/react";  
  
const PostEdit: React.FC = () => {  
 return (  
 <Edit  
 headerButtons={({ defaultButtons }) => (  
 <HStack>  
 {defaultButtons}  
 <Button colorScheme="red">Custom Button</Button>  
 </HStack>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

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:

import { Edit, useNavigation } from "@refinedev/chakra-ui";  
import { Button, HStack } from "@chakra-ui/react";  
  
const PostEdit: React.FC = () => {  
 const { go } = useNavigation();

 return (  
 <Edit  
 headerButtons={({ refreshButtonProps }) => (  
 <HStack>  
 <Button onClick={() => go("/custom-path")}>Custom List Button</Button>  
 <RefreshButton {...refreshButtonProps} />
 </HStack>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { Edit, useNavigation } from "@refinedev/chakra-ui";  
import { Button, HStack } from "@chakra-ui/react";  
  
const PostEdit: React.FC = () => {  
 const { go } = useNavigation();

 return (  
 <Edit  
 headerButtons={({ refreshButtonProps }) => (  
 <HStack>  
 <Button onClick={() => go("/custom-path")}>Custom List Button</Button>  
 <RefreshButton {...refreshButtonProps} />
 </HStack>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

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: ----------------------

kapa.ai•15mo ago

<@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

kapa.ai•15mo ago

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:

import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 return (  
 <Edit  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 return (  
 <Edit  
 headerButtons={({ defaultButtons }) => (  
 <>  
 {defaultButtons}  
 <Button type="primary">Custom Button</Button>  
 </>  
 )}  
 >  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

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: ----------------------

kapa.ai•15mo ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below