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
kapa.ai4mo 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
kapa.ai4mo ago
<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
distinguished-blush
distinguished-blush4mo ago
@kapa.ai this does not change breadcrumbs and other things
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold
optimistic-gold4mo 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
distinguished-blush
distinguished-blush4mo ago
@Alican Erdurmaz sweet thanks