How can i create a custom action for a resource?

I want to create an action similar to "edit" but with a different name, is it possible?

9 Replies

kapa.ai•15mo ago

Hi @memento000. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to create a custom action similar to "edit" with a different name. In refine v4, you can define your actions as paths instead of components, allowing you to create custom routes for actions without being restricted to the routes created automatically. You can take advantage of the full potential of your router by defining custom routes for your actions. Here's an example of defining custom routes for actions in the resources prop:

resources={[  
 {  
  name: "products",  
  list: "/:tenantId/products",  
  show: "/:tenantId/products/:id",  
  edit: "/:tenantId/products/:id/edit",  
  create: "/:tenantId/products/create",  
  // Add your custom action route here
  customAction: "/:tenantId/products/:id/custom-action",
 }  
]}

resources={[  
 {  
  name: "products",  
  list: "/:tenantId/products",  
  show: "/:tenantId/products/:id",  
  edit: "/:tenantId/products/:id/edit",  
  create: "/:tenantId/products/create",  
  // Add your custom action route here
  customAction: "/:tenantId/products/:id/custom-action",
 }  
]}

In this example, a custom action named customAction is added with a custom route. You can implement the logic for this custom action in your application. For more information on enterprise-grade routing in refine, refer to the refine v4 announcement (https://refine.dev/blog/refine-v4-announcement). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

ambitious-aqua•15mo ago

@kapa.ai I already tried but is not working combined with useResource

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useResource hook is designed to work with the predefined actions like list, create, edit, show, and clone. To use a custom action with useResource, you can try the following workaround: 1. Add your custom action to the resources prop:

resources={[  
 {  
  name: "products",  
  list: "/:tenantId/products",  
  show: "/:tenantId/products/:id",  
  edit: "/:tenantId/products/:id/edit",  
  create: "/:tenantId/products/create",  
  // Add your custom action route here
  customAction: "/:tenantId/products/:id/custom-action",
 }  
]}

resources={[  
 {  
  name: "products",  
  list: "/:tenantId/products",  
  show: "/:tenantId/products/:id",  
  edit: "/:tenantId/products/:id/edit",  
  create: "/:tenantId/products/create",  
  // Add your custom action route here
  customAction: "/:tenantId/products/:id/custom-action",
 }  
]}

2. In your component, use the useResource hook to get the resource object:

const { resource } = useResource("products");

const { resource } = useResource("products");

3. Access the custom action path from the resource object:

const customActionPath = resource.customAction;

const customActionPath = resource.customAction;

4. Use the customActionPath in your application logic as needed. Please note that this workaround may not provide the same level of integration as the predefined actions. For more information on the useResource hook, refer to the useResource documentation (https://refine.dev/docs/api-reference/core/hooks/resource/useResource). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

evident-indigo•15mo ago

Hey @memento000, Did the bot help you?

ambitious-aqua•15mo ago

Hi @salihozdemir , no. I checked the source code and I think is not possible to add a new custom action that work seameless with the hook etc. Probably the quickest way is to change the edit component.

wise-white•15mo ago

Hey @memento000, unfortunately there's no way to define a custom action. Of course you can create a new page and use the resource by passing it to the components/hooks. Can you explain your use case and how it would ease your work? Let's see if we can make this a feature 😅
If you think this will be a good addition to refine, you can create a feature request on github!

ambitious-aqua•15mo ago

Hi @aliemirs , I'm experimenting trying to find the best solutions, for example I set a 'group' resource with the actions: 'list', 'edit', 'create'. I'm trying to create a component to view and modify the active permissions for a specific group, creating this component and viewing the page the group item is no longer active in the side menu because I no longer have a reference to the resource. So I was wondering whether to create a custom action 'permission' to keep the reference with the resource 'group'. The other solutions I have in mind is to modify the menu to keep the item active in this case or to change the edit component to have a tab with this permission managment.