other-emerald•10mo ago

Is it possible to add custom action buttons for my crud entities?

Hello guys! I'm kinda new to React and Refine, so this question could be a little dumb 😅 I have an API which I can't change and instead of having single endpoint which is responsible for update (or "edit"), it's separated into several endpoint all of which edit few fields of a record: archive (it's like soft delete, actually), edit title, etc. So I wonder if there any possibility to add some custom action buttons which trigger these endpoints, instead of one big "EDIT" feature. Thanks for the answers in advance!

2 Replies

kapa.ai•10mo ago

Hi @kindaway. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Absolutely, you can create custom action buttons in Refine to trigger specific endpoints. You can use the useUpdate hook provided by Refine to make an 'edit' call to a specific resource. The useUpdate hook is used to update a single record of a resource. Here's an example of how you can use it:

import { useUpdate } from "@pankod/refine";

const MyUpdateComponent = () => {
    const { mutate: update } = useUpdate();

    const handleClick = () => {
        update({
            resource: "posts",
            id: "1",
            values: { timestamp: new Date().toISOString() },
        });
    };

    return <button onClick={handleClick}>Update Timestamp</button>;
};

import { useUpdate } from "@pankod/refine";

const MyUpdateComponent = () => {
    const { mutate: update } = useUpdate();

    const handleClick = () => {
        update({
            resource: "posts",
            id: "1",
            values: { timestamp: new Date().toISOString() },
        });
    };

    return <button onClick={handleClick}>Update Timestamp</button>;
};

In this example, clicking the button will trigger the useUpdate method and then update the record whose resource is "posts" and whose id is "1". The values object contains the fields you want to update, in this case, the timestamp field. Please note that the actual updating of the timestamp would need to be handled on the server-side, in your API's 'edit' endpoint for the resource. You can create similar buttons for other fields you want to update and call the respective endpoints. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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