Refine Example app-crm: open Modal without changing page
I'm using this as a reference: https://github.com/refinedev/refine/tree/master/examples/app-crm
In the contact page, the example code for list page has:
<ListTitleButton toPath="contacts" buttonText="Add new contact"/> }
This is the ListTitleButton in the example:
return (
<Button
onClick={() => {
return go({
to:
${createUrl(toPath)},
query: {
to: pathname,
},
options: {
keepQuery: true,
},
type: "replace",
});
}}
>
</Button>
);
};
And their contacts return a modal:
<>
<Modal
open
title="Create Contact"
style={{ display: isHaveOverModal ? "none" : "inherit" }}
onCancel={() => {
list("contacts", "replace");
}}
okText="Save"
okButtonProps={{
...saveButtonProps,
}}
>
App.js:
<Route path="/contacts" element={<ContactsListPage><Outlet /> </ContactsListPage>}>
<Route index element={null} />
<Route path="show/:id" element={<ContactShowPage />} />
<Route path="create" element={<ContactCreatePage><Outlet /></ContactCreatePage> }></Route> </Route>
How did they achieve opening that modal inside list page without loading a new page because when I try to replicate, it just render a new page?GitHub
refine/examples/app-crm at master · refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibilty. - refinedev/refine
2 Replies
Hi @lukevo.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The behavior you're observing is achieved by using the
useModalForm hook provided by Refine. This hook allows you to create, edit, or clone a record in a modal without loading a new page.
In the provided extracts, you can see examples of how useModalForm is used to create, edit, and clone records. For instance, in the "create" action for contacts, a <CreateButton /> is placed as a child of the <List /> component. When this button is clicked, it displays a modal with the <CreateContact /> component. This is achieved by invoking the createShow() function on the click event, which is defined by the useModalForm hook.
Here's the relevant code from the extracts:
In this code, useModalForm is used to invoke the dataProvider.create method. The createShow function is then used to display the modal when the create button is clicked.
You can find more information about the useModalForm hook in the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below