dependent-tan•17mo 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•17mo 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•17mo 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•17mo ago

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

dependent-tan•17mo 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•17mo 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•17mo ago

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

dependent-tan•17mo ago

@kapa.ai no I mean if I can add a second show page

kapa.ai•17mo 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•17mo ago

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

dependent-tan•17mo ago

@alicanerdurmaz @Omer can you help with this please ? thank you

flat-fuchsia•17mo ago

you can create custom page https://refine.dev/docs/3.xx.xx/advanced-tutorials/custom-pages/

dependent-tan•17mo 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 ?

flat-fuchsia•17mo ago

Yes

dependent-tan•17mo 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•17mo 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: ----------------------