Ttdfjt

I see I can use custom action handlers for adminhtml grid actions. This is DOM node for action link (HTML):

<a class="action-menu-item"
 data-bind="attr: href: $action().href, 
 text: $action().label, 
 click: $col.getActionHandler($action())"
 data-repeat-index="0"
 href="http://.../index.php/admin/customer/index/edit/id/1/">Edit</a>

I have created additional action in adminhtml grid with callback data (PHP code):

$actions['alert'] = [
 'label' => __('Alert'),
 'callback' => 'function() alert("Action!")'
];

This action is converted into JSON and is loaded to the grid in this format, where "callback" property is a string (JSON):

"alert": 
 "label": "Alert",
 "callback": "function() alert("Action!")"

This is Magento parser for action's props (module-ui/view/base/web/js/grid/columns/actions.js). This parser process JSON data and should call action's callback in case of callback is object/array/function (see _getCallback):

getActionHandler: function (action) 
 var index = action.index,
 rowIndex = action.rowIndex;

 if (this.isHandlerRequired(index, rowIndex)) 
 return this.applyAction.bind(this, index, rowIndex);
 
,

applyAction: function (actionIndex, rowIndex) 
 debugger
 var action = this.getAction(rowIndex, actionIndex),
 callback = this._getCallback(action);

 action.confirm ?
 this._confirm(action, callback) :
 callback();

 return this;
,

_getCallback: function (action) 
 var args = [action.index, action.recordId, action],
 callback = action.callback;

 if (utils.isObject(callback)) 
 args.unshift(callback.target);

 callback = registry.async(callback.provider);
 else if (_.isArray(callback)) 
 return this._getCallbacks(action);
 else if (!_.isFunction(callback)) 
 callback = this.defaultCallback.bind(this);
 

 return function () 
 callback.apply(callback, args);
 ;
,

But callback property is a string, so defaultCallback is used.

How can I use my own action handler in adminhtml grid actions?

Update mass-action action in the grid component xml as below:

 <action name="add">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="confirm" xsi:type="array">
 <item name="title" xsi:type="string" translate="true">Add Data</item>
 <item name="message" xsi:type="string" translate="true">Add Data ?</item>
 </item>
 <item name="type" xsi:type="string">add</item>
 <item name="label" xsi:type="string" translate="true">Add Data</item>
 <item name="callback" xsi:type="array">
 <item name="provider" xsi:type="string">my_form.my_form.field_data</item>
 <item name="target" xsi:type="string">addData</item>
 </item>
 </item>
 </argument>
 </action>

Here, my_form.my_form.field_data is my form namespace and file name.

field_data is my text field.

Below is my field with custom js component:

<field name="field_data">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="visible" xsi:type="boolean">false</item>
 <item name="component" xsi:type="string">My_Module/js/data</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">my_form_form_data_source</item>
 <item name="label" xsi:type="string" translate="true">Mass Action Data</item>
 </item>
 </argument>
 </field>

data.js component file:

define([
 'underscore',
 'uiRegistry',
 'Magento_Ui/js/form/element/abstract'
 ], function (_, uiRegistry, Abstract) 
 'use strict';

return Abstract.extend(
 addData: function (action, data) );

 console.log(selections); // you mass action value.

 
);
);

You can use any component js to handle the callback. I used my field component js and saved the data in the form field.