optimistic-gold
optimistic-gold13mo ago

new separated page

hi I want to make a page that I can move to it only when I click on a button inside another page so how I can add this page I talk about without adding to the resources and the menu items ? note: I use old version of refine
19 Replies
kapa.ai
kapa.ai13mo ago
Hi @Deleted User. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai13mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation for more information: https://refine.dev/docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Overview | refine
What is refine?
kapa.ai
kapa.ai13mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold13mo ago
can I do show pages for an item in resources ?
resources={[
{
name: "Products",
list: Products,
show: ProductDetails, // addinganother page
create: CreateProduct,
edit: EditProduct,
icon: <Build/>,

},
resources={[
{
name: "Products",
list: Products,
show: ProductDetails, // addinganother page
create: CreateProduct,
edit: EditProduct,
icon: <Build/>,

},
@kapa.ai
kapa.ai
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can add a show page for an item in resources. In your example, you can add the ProductDetails component as the show page for the "Products" resource. Here's the updated code:
resources={[
{
name: "Products",
list: Products,
show: ProductDetails, // adding another page
create: CreateProduct,
edit: EditProduct,
icon: <Build />,
},
]}
resources={[
{
name: "Products",
list: Products,
show: ProductDetails, // adding another page
create: CreateProduct,
edit: EditProduct,
icon: <Build />,
},
]}
This will create a show page for the "Products" resource, and it will be rendered by the /products/show/:id route. The ProductDetails component should handle the display of the product details based on the provided id. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai13mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold13mo ago
@kapa.ai no I mean if I can add a second show page
kapa.ai
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can add a second show page for a resource, but you'll need to define a custom route for it. Here's an example of how you can do this: 1. Add a new show page component, for example, ProductDetailsExtra. 2. Update your resources configuration:
resources={[
{
name: "Products",
list: Products,
show: ProductDetails,
create: CreateProduct,
edit: EditProduct,
icon: <Build />,
},
]}
resources={[
{
name: "Products",
list: Products,
show: ProductDetails,
create: CreateProduct,
edit: EditProduct,
icon: <Build />,
},
]}
3. Add a custom route for the second show page in your Routes configuration:
<Routes>
{/* ... other routes */}
<Route path="products/show-extra/:id" element={<ProductDetailsExtra />} />
</Routes>
<Routes>
{/* ... other routes */}
<Route path="products/show-extra/:id" element={<ProductDetailsExtra />} />
</Routes>
Now, you can navigate to the second show page using the custom route /products/show-extra/:id. Make sure to update the navigation logic in your application to use this custom route when needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai13mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold13mo ago
@alicanerdurmaz @Omer can you help with this please ? thank you
yappiest-sapphire
yappiest-sapphire13mo ago
optimistic-gold
optimistic-gold13mo ago
hi @alicanerdurmaz if we take this example:
const App = () => (
<Refine
resources={[
// This will add an item to `<Sider/>` with route `/my-custom-item`
{ name: "my-custom-item", list: () => null },
]}
/>
);
const App = () => (
<Refine
resources={[
// This will add an item to `<Sider/>` with route `/my-custom-item`
{ name: "my-custom-item", list: () => null },
]}
/>
);
I understand by setting the list = null it will not shown as an item in the sideBar right ?
yappiest-sapphire
yappiest-sapphire13mo ago
Yes
optimistic-gold
optimistic-gold13mo ago
I added exactly like the example: { name: "Bid", list: () => null } but I can see the Bid item in the sidebar how I can hide it ? @Deleted User @kapa.ai Thanks
kapa.ai
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To hide the "Bid" item in the sidebar, you can use the meta property with the hide attribute in your resource configuration:
resources={{[
{{
name: "Bid",
list: () => null,
meta: {
hide: true,
},
}},
// ... other resources
]}}
resources={{[
{{
name: "Bid",
list: () => null,
meta: {
hide: true,
},
}},
// ... other resources
]}}
This will hide the "Bid" resource in the sidebar. The hide attribute is used to filter the resource in the useMenu hook, which controls the visibility of resources in the sidebar. For more information, 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
kapa.ai13mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold13mo ago
yes its worked @kapa.ai for old version:
options: {hide: true}
options: {hide: true}
thank you
kapa.ai
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad it worked for you! In the older version of refine, you can use the options property with the hide attribute to hide a resource in the sidebar:
resources={{[
{{
name: "Bid",
list: () => null,
options: {{
hide: true,
}},
}},
// ... other resources
]}}
resources={{[
{{
name: "Bid",
list: () => null,
options: {{
hide: true,
}},
}},
// ... other resources
]}}
However, please note that the options prop is deprecated in newer versions of refine. It's recommended to use the meta prop instead, as shown in my previous answer. For more information on migrating from 3.x.x to 4.x.x, refer to the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai13mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below