jolly-crimson•2y ago

two list pages with same resource

I need multiple list pages which are using same resource but with a different permanent filters. so those pages will display different data. but two list with same resource is not showing in the sidebar. any way to fix

8 Replies

kapa.ai•2y ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can create multiple list pages using the same resource but with different permanent filters. This way, each page will display different data based on the filter applied. For example, you can use the useSimpleList hook in refine to apply a permanent filter to your list. Here's an example of how you can do this:

import { useParsed } from "@refinedev/core";  
  
const { params } = useParsed<{ tenant?: string }>();  
  
const { listProps } = useSimpleList<IProduct>({  
 filters: {  
 permanent: [{ field: "storeId", operator: "eq", value: params?.tenant }],  
 },  
});

import { useParsed } from "@refinedev/core";  
  
const { params } = useParsed<{ tenant?: string }>();  
  
const { listProps } = useSimpleList<IProduct>({  
 filters: {  
 permanent: [{ field: "storeId", operator: "eq", value: params?.tenant }],  
 },  
});

In the above example, the list of products is filtered based on the storeId obtained from the Store Context. This way, you can control more than single content in one application. As for the issue of the same resource not showing up in the sidebar, it's important to note that by default, refine generates the sidebar based on the resources defined in the Refine component. If you want to customize the sidebar, you can use the Sidebar component and define your own routes. Unfortunately, the extracts provided do not contain specific information on how to customize the sidebar in refine. For more detailed instructions, you can refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

jolly-crimsonOP•2y ago

@kapa.ai in my sidebar i'm using useMenu to get sidebar menu items.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useMenu hook in refine is used to generate menu items based on the resources defined in the Refine component. It returns an object containing menuItems, selectedKey, and defaultOpenKeys. Here's an example of how you can use useMenu in your sidebar:

import { useMenu } from "@refinedev/core";  
  
export const Sider: React.FC = () => {  
 const { menuItems, selectedKey, defaultOpenKeys } = useMenu();  
  
 // Here create your Sider to your UI choice  
};

import { useMenu } from "@refinedev/core";  
  
export const Sider: React.FC = () => {  
 const { menuItems, selectedKey, defaultOpenKeys } = useMenu();  
  
 // Here create your Sider to your UI choice  
};

The menuItems is an array of objects, each representing a menu item. Each object has a name, key, route, and children properties. The children property is an array of objects, each representing a submenu item. If you want to create a multi-level menu, you can use the children property to define submenu items. Here's an example of what the menuItems might look like:

[  
 {  
 name: "CMS",  
 key: "CMS",  
 ...  
 children: [  
 {  
 name: "posts",  
 key: "CMS/posts",  
 route: "/posts",  
 ...  
 children: [],  
 },  
 {  
 name: "category",  
 key: "CMS/category",  
 route: "/category",  
 ...  
 children: [],  
 },  
 ],  
 },  
];

[  
 {  
 name: "CMS",  
 key: "CMS",  
 ...  
 children: [  
 {  
 name: "posts",  
 key: "CMS/posts",  
 route: "/posts",  
 ...  
 children: [],  
 },  
 {  
 name: "category",  
 key: "CMS/category",  
 route: "/category",  
 ...  
 children: [],  
 },  
 ],  
 },  
];

In this example, "CMS" is a menu item with two submenu items: "posts" and "category". For more information on how to use useMenu, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

jolly-crimsonOP•2y ago

in my resource, I have defined two items with same name, and when i use useMenu, only one is there which is first defined one @kapa.ai in my resource, I have defined two items with same name, and when i use useMenu, only one is there which is first defined one

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useMenu hook in refine generates menu items based on the resources defined in the Refine component. If you have two resources with the same name, useMenu will only generate a menu item for the first one. To create separate menu items for each resource, you can use the meta.parent property to nest resources under different parent labels. Here's an example:

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 list: "/CMS/posts",  
 meta: { parent: "CMS" },  
 },  
 {  
 name: "categories",  
 list: "/CMS/categories",  
 meta: { parent: "CMS" },  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Layout>  
 <Outlet />  
 </Layout>  
 }  
 >  
 <Route index element={<NavigateToResource />} />  
 <Route  
 path="/posts"  
 element={<div>dummy posts page</div>}  
 />  
 <Route  
 path="/categories"  
 element={<div>dummy categories page</div>}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 list: "/CMS/posts",  
 meta: { parent: "CMS" },  
 },  
 {  
 name: "categories",  
 list: "/CMS/categories",  
 meta: { parent: "CMS" },  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Layout>  
 <Outlet />  
 </Layout>  
 }  
 >  
 <Route index element={<NavigateToResource />} />  
 <Route  
 path="/posts"  
 element={<div>dummy posts page</div>}  
 />  
 <Route  
 path="/categories"  
 element={<div>dummy categories page</div>}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};

In this example, "posts" and "categories" are both nested under the "CMS" parent label. This will create separate menu items for "posts" and "categories" in the sidebar. For more information on how to use useMenu, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

two list pages with same resource

Did you find this page helpful?