How can i create a custom action for a resource?

dry-scarlet · 2023-05-15T12:27:11.427Z

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

K

kapa.ai•5/15/23, 12:27 PM

Hi @memento000. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•5/15/23, 12:28 PM

----------------------
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

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",
 }  
]}

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

customAction

customAction

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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/15/23, 12:28 PM

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

D

dry-scarletOP•5/15/23, 1:06 PM

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

K

kapa.ai•5/15/23, 1:06 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/15/23, 1:07 PM

----------------------
I apologize for the confusion. The

useResource

useResource

useResource

useResource hook is designed to work with the predefined actions like

list

list

,

create

create

,

edit

edit

,

show

show

show

show, and

clone

clone

clone

clone. To use a custom action with

useResource

useResource

useResource

useResource, you can try the following workaround:

Add your custom action to the
```
resources
```
```
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",
 }  
]}

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 your component, use the
```
useResource
```
useResource
```
useResource
```
useResource
hook to get the resource object:

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

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

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

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

Access the custom action path from the
```
resource
```
```
resource
```
object:

const customActionPath = resource.customAction;

const customActionPath = resource.customAction;

const customActionPath = resource.customAction;

const customActionPath = resource.customAction;

Use the
```
customActionPath
```
customActionPath
```
customActionPath
```
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

useResource

useResource

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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/15/23, 1:07 PM

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

C

colossal-harlequin•5/15/23, 6:57 PM

Hey @memento000,

Did the bot help you?

D

dry-scarletOP•5/16/23, 7:47 AM

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.

E

efficient-indigo•5/16/23, 11:41 AM

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!

D

dry-scarletOP•5/16/23, 12:48 PM

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.