How To Catch Crud Actions With Javascript

When you want to extend a crud by adding new actions, you'll often need to handle these actions not on the backend, but on the frontend. This could be a better way to open a popup when an action is clicked.

Concretely, let's consider the following example. We would like to transfer specific units from a product to a warehouse. But we need when a user click on "Transfer Stock" a popup to show up. That way, we'll load a custom Vue component.

Inject A Footer On A Crud Instance

Now we need to conditionnaly inject a custom footer on a Crud instance that we want to extends. This means, when only a ProductCrud instance is being used for example. For that, we first need to register a filter.

Here, we've injected a view on the footer of the crud instance that will process "products".

Register A Custom Row Action

Now, we need to register a custom row action, with the identifier "my-product-transfer".

Catching The Action From Javascript

Now we need to catch that action as we haven't defined any specific known type.

First, we check if the event is "ns-table-row-action", then we check if the action namespace is "my-product-transfer". Then we can execute our component. We'll then need to use a "Popup" object to create a popup for out specific component. We'll assume you have correctly registered your Vue component and would like to open it when an action is clicked. We'll here use the previous example.

From now, we should be able to see a popup showing up.