Not having a list page(needs maintainers attention!)

Hey everyone. Is it possible to create only edit/delete/custom page without having a list page? If I want to have it in the sidebar menu?
K
kapa.ai321d ago
Hi @metammodern. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
K
kapa.ai321d ago
---------------------- Yes, it is possible to create only edit, delete, or custom pages without having a list page in refine. You can customize the sidebar menu by using the meta prop in the resources configuration of the <Refine> component. Here's an example of how to add a custom edit page to the sidebar menu:
import { CustomEditPage } from "./pages/custom";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom",
edit: CustomEditPage,
meta: { label: "Custom Edit", route: "/custom-edit" },
},
]}
/>
);
}
import { CustomEditPage } from "./pages/custom";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom",
edit: CustomEditPage,
meta: { label: "Custom Edit", route: "/custom-edit" },
},
]}
/>
);
}
In this example, we're adding a custom edit page called CustomEditPage to the sidebar menu with the label "Custom Edit" and a custom route /custom-edit. You can do the same for delete or any other custom pages. Keep in mind that you'll need to implement the functionality for the custom edit or delete pages yourself. You can refer to the following extracts for examples on how to use useDelete and <Edit> components: - useDelete example (https://refine.dev/blog/refine-react-invoice-generator-3#adding-crud-pages) - Edit component example (https://refine.dev/docs/api-reference/antd/components/basic-views/edit#resource) Remember to replace the imported components and resource names with the ones relevant to your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Adding CRUD Pages | refine
We'll be adding CRUD pages for Company, Client and Contact resources in this post.
Edit | refine
`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.
K
kapa.ai321d ago
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
P
passive-yellow321d ago
@kapa.ai can you write me an implementation of a custom page for deleting resource, that has a small form with 1 input(for resource id) and a button to submit deletion? And then shows a notification that deletion was successful(better using a modal window).
K
kapa.ai321d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's an implementation of a custom delete page with a form containing an input for the resource ID and a button to submit the deletion. This example uses the useDelete hook and the NotificationProvider for showing a success notification. First, create a new file called CustomDeletePage.tsx and add the following code:
import { useState } from "react";
import { useDelete, useForm, useNotification } from "@pankod/refine";

const CustomDeletePage = () => {
const [resourceId, setResourceId] = useState("");
const { mutate: deleteResource } = useDelete();
const { open } = useNotification();

const handleSubmit = async () => {
try {
await deleteResource({
id: resourceId,
resource: "yourResourceName",
});
open({
message: `Resource with ID ${resourceId} deleted successfully.`,
type: "success",
});
} catch (error) {
open({
message: `Error deleting resource with ID ${resourceId}.`,
type: "error",
});
}
};

return (
<div>
<h1>Delete Resource</h1>
<input
type="text"
value={resourceId}
onChange={(e) => setResourceId(e.target.value)}
placeholder="Enter resource ID"
/>
<button onClick={handleSubmit}>Delete</button>
</div>
);
};

export default CustomDeletePage;
import { useState } from "react";
import { useDelete, useForm, useNotification } from "@pankod/refine";

const CustomDeletePage = () => {
const [resourceId, setResourceId] = useState("");
const { mutate: deleteResource } = useDelete();
const { open } = useNotification();

const handleSubmit = async () => {
try {
await deleteResource({
id: resourceId,
resource: "yourResourceName",
});
open({
message: `Resource with ID ${resourceId} deleted successfully.`,
type: "success",
});
} catch (error) {
open({
message: `Error deleting resource with ID ${resourceId}.`,
type: "error",
});
}
};

return (
<div>
<h1>Delete Resource</h1>
<input
type="text"
value={resourceId}
onChange={(e) => setResourceId(e.target.value)}
placeholder="Enter resource ID"
/>
<button onClick={handleSubmit}>Delete</button>
</div>
);
};

export default CustomDeletePage;
Replace yourResourceName with the actual name of the resource you want to delete. Next, update your App.tsx file to include the custom delete page in the sidebar menu:
import { CustomDeletePage } from "./CustomDeletePage";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom-delete",
edit: CustomDeletePage,
meta: { label: "Custom Delete", route: "/custom-delete" },
},
]}
/>
);
}
import { CustomDeletePage } from "./CustomDeletePage";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom-delete",
edit: CustomDeletePage,
meta: { label: "Custom Delete", route: "/custom-delete" },
},
]}
/>
);
}
This implementation will show a success notification using the NotificationProvider when the deletion is successful. If you prefer to use a modal window for notifications, you'll need to implement it using a UI library of your choice, such as Ant Design or Mantine, and handle the modal state in your custom delete page component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai321d ago
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
P
passive-yellow321d ago
@kapa.ai meta doesn't exist on type ResourceProp. Was it added in later releases? I have refine core v3.18
K
kapa.ai321d ago
Let me check the knowledge base for you. One moment! :books:
K
kapa.ai321d ago
---------------------- I apologize for the confusion. The meta prop was introduced in refine 4.x.x, and it seems you are using refine core v3.18. In refine 3.x.x, you should use the options prop instead of meta. Here's how you can update the example for refine 3.x.x: Update your App.tsx file to include the custom delete page in the sidebar menu using the options prop:
import { CustomDeletePage } from "./CustomDeletePage";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom-delete",
edit: CustomDeletePage,
options: { label: "Custom Delete", route: "/custom-delete" },
},
]}
/>
);
}
import { CustomDeletePage } from "./CustomDeletePage";

function App() {
return (
<Refine
// ...
resources={[
{
name: "custom-delete",
edit: CustomDeletePage,
options: { label: "Custom Delete", route: "/custom-delete" },
},
]}
/>
);
}
Please note that the options prop is deprecated in refine 4.x.x, and it's recommended to upgrade to the latest version of refine to take advantage of the new features and improvements. You can follow the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x) to upgrade from 3.x.x to 4.x.x. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Migrating from 3.x.x to 4.x.x | refine
Motivation behind the release
K
kapa.ai321d ago
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
P
passive-yellow321d ago
@kapa.ai actually I also had to use routerProvider, and I found it here. https://refine.dev/docs/3.xx.xx/advanced-tutorials/custom-pages/#layout-for-custom-pages Leaving for anyone else to find. Thanks and bye bye:)
Custom Pages | refine
This document is related to how to create custom pages for react applications. Since Nextjs and Remix have a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.
K
kapa.ai321d ago
Let me check the knowledge base for you. One moment! :books:
K
kapa.ai321d ago
---------------------- I'm glad you found the solution for your version of refine. For anyone else looking for the same information, in refine 3.x.x, you can use the routerProvider to create custom pages. Here's the documentation link (https://refine.dev/docs/3.xx.xx/advanced-tutorials/custom-pages/#layout-for-custom-pages) for reference. If you have any more questions or need further assistance, feel free to ask. Good luck with your project! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Custom Pages | refine
This document is related to how to create custom pages for react applications. Since Nextjs and Remix have a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.
K
kapa.ai321d ago
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
P
passive-yellow321d ago
@kapa.ai I've got another issue: in refine v3.18 I've created a separate custom page and a resource with empty list page. My resource is called "user" and my cusotm page is under "/delete-user" route. But when I click "User" on sidebar, it navigates me to "/user" and not to "/user-delete". How do I make it navigate to "/delete-user"? When I put {options: { route: '/delete-user'}} and click the page in Sidebar I get an empty page opened at "http://delete-user/". What causes this? Do I have to declate full url as route?
K
kapa.ai321d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- In refine 3.x.x, you can use the options prop to customize the route for a resource. However, it seems like there's an issue with the route configuration in your case. To fix this, you can try the following steps: 1. Make sure you have the correct route configuration in your App.tsx file. You should have a custom route for your "delete-user" page:
import {{ CustomDeletePage }} from "./CustomDeletePage";

function App() {{
return (
<Refine
// ...
resources={{[
{{
name: "user",
list: "",
options: {{ label: "User", route: "/delete-user" }},
}},
]}}
/>
);
}}
import {{ CustomDeletePage }} from "./CustomDeletePage";

function App() {{
return (
<Refine
// ...
resources={{[
{{
name: "user",
list: "",
options: {{ label: "User", route: "/delete-user" }},
}},
]}}
/>
);
}}
2. Ensure that you have the correct route configuration for your custom page in your router configuration. You should have something like this:
import {{ Route }} from "react-router-dom";
import {{ CustomDeletePage }} from "./CustomDeletePage";

// ...

<Route path="/delete-user" component={{CustomDeletePage}} />
import {{ Route }} from "react-router-dom";
import {{ CustomDeletePage }} from "./CustomDeletePage";

// ...

<Route path="/delete-user" component={{CustomDeletePage}} />
By following these steps, clicking on the "User" item in the sidebar should navigate you to the "/delete-user" route and display the CustomDeletePage component. If you still encounter issues, please double-check your route configurations and make sure there are no typos or incorrect paths. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai321d ago
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
P
passive-yellow321d ago
For anyone who tries to do the same: I just named my resource "delete-user" and it started working Can someone please tell why having options: route: "/delete-user" is opening a "http://delete-user/" url?
More Posts
Use Base64 string and conversion for simple "upload" Field inside of existing formHey everyone, I'm trying to implement a simple Upload-Field inside of an existing form which is usinHello need to include tailwind css toHello, need to include tailwind css to already existing refine.js with nextjs, ant-design ? any refe"npm install" cannot find package.json1) Used refine.new to download a bundled project 2) Unzipped the project file 3) From root of projecHow do I use useTable without a resource?Hi there, I am able to use useTable to retrieve data from a mock api as long as my array of incomingMUI Datagrid editable column - compile errorHi, i'm trying to make an editable column with MUI Datagrid, React and Refine 4.x See the list.tsx sHow to access a useState variable in a useSubscriptionHere is my code, useSubscription can't access new values of a useState variable : ```tsx const [sDynamic variable useSubscriptionHi, I have a problem, when my sessionChoose variable is updated, it doesn't take effect in the useSuAuto fill filter form in Table FilterWhen using filter form to filter data in table it does work. How can I make sure that the filter foruseInfiniteListHello. I am using useInfiniteList, how do I make it so that when I load new elements, they are addeHow to retrieve a list of elementsHello, I don't quite understand how refine works. I would like to retrieve the list of all my exerciHow do I use the token generated by the Google auth?I am using Refine with built in Google authorization process. I would like to use the token, becauseIs refine for a admin panel or for aIs refine for a admin panel, or for a whole website? Because I have to replace mainly the whole frodoes refine fully support Nextjs?I mainly use Next JS, I might go with PlanetScale for my DB instead of Supabasehey guys please who do i pitch for ahey guys, please who do i pitch for a technical article idea?Dockerfile Config for ProductionHello, I wonder if there is a dockerfile example so that I can deploy my Refine project in productioAfter adding a parent to my menuItem in the sidebar the create: AddEmployee is giving 404 errorI have an element called My Business which is a parent element in the sidebar and I have under it EmHow to place my submenus on the right from the sider instead of placing them under itIs there a simple way to do that?Compile error next-authGenerated project: Nextjs + Ant Design+ Hasura + Auth0. Unzipped, `npm install`, `npm run dev` and fResources with the same name on different APIsHello Refine community and maintainers! Thanks again for this awesome product, that really helps me SOLVED nothing to do with Refine it wasSOLVED: nothing to do with Refine, it was Expo cache issue, options to disable both work fine on Exp