deep-jade•2y 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•2y 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•2y 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•2y ago

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

deep-jadeOP•2y 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•2y 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•2y ago

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

deep-jadeOP•2y ago

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

kapa.ai•2y 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•2y ago

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

deep-jadeOP•2y ago

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

genetic-orange•2y ago

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

deep-jadeOP•2y 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 ?

genetic-orange•2y ago

Yes

deep-jadeOP•2y 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•2y 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•2y ago

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

deep-jadeOP•2y ago

yes its worked @kapa.ai for old version:

 options: {hide: true}

 options: {hide: true}

thank you

kapa.ai•2y 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•2y ago

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

new separated page

Did you find this page helpful?