R
Refine

ask-any-question

two list pages with same resource

Fflat-fuchsia7/7/2023
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
Kkapa.ai7/7/2023
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: ----------------------
Kkapa.ai7/7/2023
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
Fflat-fuchsia7/7/2023
@kapa.ai in my sidebar i'm using useMenu to get sidebar menu items.
Kkapa.ai7/7/2023
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: ----------------------
Kkapa.ai7/7/2023
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
Fflat-fuchsia7/7/2023
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
Kkapa.ai7/7/2023
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: ----------------------
Kkapa.ai7/7/2023
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
I have this super strange error and I dont know why ... Instance created by useForm is not connectedI have this super strange error and I dont know why ... Instance created by useForm is not connectedSub ResourcesHow can i create sub resources? I have teams and tasks resources. I want to relate the tasks with teCreating app with JSHi, I am facing some trouble in creating a new refine project using js. I have followed steps as menwhats best practice for customizing document title on a specific resource route?Essentially, I have a show route that I want the document title to be "{name of user} Artist Review Edit Pre-population Based On IDHi! Smaller issue, hope thats okay. I have a dropdown similar to ``` <Form.Item name="LocationID" >Help with inferencerHow can i use meta prop to select some columns with inferencer?initial filteris there any way to get a permenantly filtered list from useDataGidPropsselect multiple joinshow do you do multiple joins with select on useTable when using supabase?Select syntax for supabasehow do you do multiple joins with select on useTable when using supabase? can't find anything on trRefetching data on state change```const { data: scenarios, isLoading, refetch } = useOne({ resource: "scenarios/course", I have an error ReferenceError: document is not definedI am trying to setup refine with REST API as a data provider. And while I am combine my own custom cRerendering list after deleteI have a resource component that is a child component of my list. It has its own delete button, but Need help setting up graphql and prisma with refine nextjsNeed help setting up graphql and prisma with refine nextjsInstance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?I have this super strange error and I dont know why ... Instance created by `useForm` is not connectuseAutocomplete loadingHow can I set a useEffect hook that runs once the useAutocomplete axios request completes.How to change the logo in login and sidebar using ThemedTitleV2?How to change the logo in login and sidebar using ThemedTitleV2? can you help me I am new devi18n causes duplicate data fetchingI'm trying refine with this example: https://github.com/refinedev/refine/tree/next/examples/i18n-reauseFormHello, in the `edit` action mode of `useForm()`, is there a way to disable the inital auto-fetch of First Setup RefineShow me how to step by step setup on refine, I will make a MERN Stack applicationProblems nesting resources and routesI am trying to nest my child resource routes within the parents, but I am having difficulty doing so