absent-sapphire•11mo ago

how would i change show to details

I want to change show to details for example { name: "issuing", list: "/issuing", show: "/issuing/show/:id", meta: { icon: <AddShoppingCartOutlined />, // label: t("issuing.issuing"), }, },

7 Replies

kapa.ai•11mo ago

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can change the show action's path by overriding the default path. In your case, you can change /issuing/show/:id to /issuing/details/:id. Here's how you can do it:

{
  name: "issuing",
  list: "/issuing",
  show: "/issuing/details/:id",
  meta: {
    icon: <AddShoppingCartOutlined />,
    // label: t("issuing.issuing"),
  },
}

{
  name: "issuing",
  list: "/issuing",
  show: "/issuing/details/:id",
  meta: {
    icon: <AddShoppingCartOutlined />,
    // label: t("issuing.issuing"),
  },
}

This will change the route for the show action of the issuing resource to /issuing/details/:id. For more information, you can refer to the Refine documentation on routing (https://refine.dev/docs/routing/integrations/react-router#refineroutes-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

absent-sapphireOP•11mo ago

@kapa.ai this does not change breadcrumbs and other things

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to change the breadcrumbs and other related components, you need to customize them accordingly. For breadcrumbs, you can use the <Breadcrumb /> component from the UI library you're using (Material-UI, Ant Design, etc.) and the useBreadcrumb hook provided by Refine. You can customize the breadcrumb's appearance and behavior using the breadcrumbProps property. Here's an example of how you can customize the breadcrumb in Material-UI:

import { Show, Breadcrumb } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 breadcrumb={<Breadcrumb breadcrumbProps={{ separator: "-" }} />}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show, Breadcrumb } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 breadcrumb={<Breadcrumb breadcrumbProps={{ separator: "-" }} />}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

In this example, the breadcrumb separator is customized to be a dash ("-") instead of the default ("/"). For other components, you might need to customize them individually. For example, if you're using a <ShowButton />, you need to pass the correct resource and recordItemId to it:

import { ShowButton } from "@refinedev/mui";  

const MyShowComponent = () => {  
 return (  
 <ShowButton  
 resource="categories"  
 recordItemId="2"  
 />  
 );  
};

import { ShowButton } from "@refinedev/mui";  

const MyShowComponent = () => {  
 return (  
 <ShowButton  
 resource="categories"  
 recordItemId="2"  
 />  
 );  
};

In this example, clicking the button will trigger the show method of useNavigation and then redirect the app to the show action path of the resource, filling the necessary parameters in the route. For more information, you can refer to the Refine documentation on UI integrations (https://refine.dev/docs/ui-integrations/mantine/components/buttons/show-button#resource) and Refine documentation on routing (https://refine.dev/docs/routing/integrations/react-router#refineroutes-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

conscious-sapphire•11mo ago

Hello @Joe Gaffney , You can use i18n for this https://refine.dev/docs/guides-concepts/i18n You can find translation file here: https://refine.dev/docs/guides-concepts/i18n/#translation-file You need to change actions.show: Details

absent-sapphireOP•11mo ago

@Alican Erdurmaz sweet thanks

how would i change show to details

Did you find this page helpful?