How to add a custom action to a xml button inside a listing element in ui_component? Magento 2

Question

I have a custom module with a view folder. In this view folder, there is a ui_component folder with an XML file called mobileplans_listing_xml. This XML file is creating a listing element as the parent tag. I am trying to add another button called "Refresh Dids" to this listing element and call my own custom action on the button click. There is an "Add Virtual Number" button on this page that redirects to the new controller. For some reason, when I add the button to this XML a default on click event handler is added to the HTML. I want to create my own click event/action and not use the default. How do I go about that?

Here is the XML file

<?xml version="1.0" encoding="UTF-8"?>

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">mobileplans_virtualnumbers_listing.mobileplans_virtualnumbers_listing_data_source</item>
        <item name="deps" xsi:type="string">mobileplans_virtualnumbers_listing.mobileplans_virtualnumbers_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">virtualnumbers_columns</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add Virtual Numbers</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
        <item name="refreshdids" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string">Refresh Dids</item>
        </item>
    </item>
</argument>  
<dataSource name="mobileplans_virtualnumbers_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">VirtualnumbersGridDataProvider</argument>
        <argument name="name" xsi:type="string">mobileplans_virtualnumbers_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<listingToolbar name="listing_top">
    <settings>
        <sticky>false</sticky>
    </settings>
    <bookmark name="bookmarks"/>
    <columnsControls name="columns_controls" />
    <filterSearch name="fulltext"/>
    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="observers" xsi:type="array">
                <item name="column" xsi:type="string">column</item>
            </item>
        </argument>
        <settings>
            <templates>
                <filters>
                    <select>
                        <param name="template" xsi:type="string">ui/grid/filters/elements/ui-select</param>
                        <param name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</param>
                    </select>
                </filters>
            </templates>
        </settings>
    </filters>
    <massaction name="listing_massaction">
        <action name="delete">
            <settings>
                <confirm>
                    <message translate="true">Are you sure you want to delete selected items?</message>
                    <title translate="true">Delete items</title>
                </confirm>
                <url path="mobileplans/virtualnumbers/massDelete"/>
                <type>delete</type>
                <label translate="true">Delete</label>
            </settings>
        </action>
    </massaction>
    <paging name="listing_paging"/>
</listingToolbar>
<columns name="virtualnumbers_columns">
    <settings>
        <editorConfig>
            <param name="clientConfig" xsi:type="array">
                <item name="saveUrl" xsi:type="url" path="mobileplans/virtualnumbers/inlineEdit"/>
                <item name="validateBeforeSave" xsi:type="boolean">false</item>
            </param>
            <param name="indexField" xsi:type="string">id</param>
            <param name="enabled" xsi:type="boolean">true</param>
            <param name="selectProvider" xsi:type="string">mobileplans_virtualnumbers_listing.mobileplans_virtualnumbers_listing.virtualnumbers_columns.ids</param>
        </editorConfig>
        <childDefaults>
            <param name="fieldAction" xsi:type="array">
                <item name="provider" xsi:type="string">mobileplans_virtualnumbers_listing.mobileplans_virtualnumbers_listing.virtualnumbers_columns_editor</item>
                <item name="target" xsi:type="string">startEdit</item>
                <item name="params" xsi:type="array">
                    <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                    <item name="1" xsi:type="boolean">true</item>
                </item>
            </param>
        </childDefaults>
    </settings>
    <selectionsColumn name="ids">
        <settings>
            <indexField>id</indexField>
            <resizeEnabled>false</resizeEnabled>
            <resizeDefaultWidth>55</resizeDefaultWidth>
        </settings>
    </selectionsColumn>
    <column name="id">
        <settings>
            <filter>textRange</filter>
            <label translate="true">ID</label>
            <sorting>asc</sorting>
        </settings>
    </column>
    <column name="country">
        <settings>
            <filter>text</filter>
            <editor>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Country</label>
        </settings>
    </column>
    <column name="country_code">
        <settings>
            <filter>text</filter>
            <editor>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Country Code</label>
        </settings>
    </column>
    <column name="area_code">
        <settings>
            <filter>text</filter>
            <editor>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Area Code</label>
        </settings>
    </column>
    <column name="phone_number">
        <settings>
            <filter>text</filter>
            <editor>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Phone Number</label>
        </settings>
    </column>
    <column name="name">
        <settings>
            <filter>text</filter>
            <editor>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Provider Name</label>
        </settings>
    </column>
    <column name="is_external">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="label" translate="true" xsi:type="string">Is External</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">select</item>
                </item>
            </item>
        </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
        <settings>
            <filter>dateRange</filter>
            <dataType>date</dataType>
            <label translate="true">Created</label>
        </settings>
    </column>
    <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
        <settings>
            <filter>dateRange</filter>
            <dataType>date</dataType>
            <label translate="true">Modified</label>
        </settings>
    </column>
    <actionsColumn name="actions" class="Mobileplans\Ui\Component\Listing\Column\VirtualnumbersActions">
        <settings>
            <indexField>id</indexField>
            <resizeEnabled>false</resizeEnabled>
            <resizeDefaultWidth>107</resizeDefaultWidth>
        </settings>
    </actionsColumn>
</columns>
</listing>

Answer 1

put this code to Add new Button

   <item name="refreshdids" xsi:type="array">
        <item name="name" xsi:type="string">RefreshDids</item>
        <item name="label" xsi:type="string" translate="true"> Refresh Dids</item>
        <item name="class" xsi:type="string">secondary</item>
        <item name="url" xsi:type="string">*/*/refreshdids</item>
        <item name="sortOrder" xsi:type="number">20</item>
    </item>

Button URL

<item name="url" xsi:type="string">*/*/refreshdids</item>

<item name="url" xsi:type="string">[Route_id] / [Controller_name] / [File_Name]</item>    

Now create your Action for This button

[vendor_name] / [Module_Name]/Controller/Adminhtml/Virtualnumbers

Refreshdids.php

<?php

namespace [vendor_name]\[module_name]\Controller\Adminhtml\Virtualnumbers;

use Magento\Framework\App\Filesystem\DirectoryList;


class Refreshdids extends \Magento\Backend\App\Action
{
    protected $uploaderFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\App\Response\Http\FileFactory $fileFactory,
        \Magento\Framework\Filesystem $filesystem,                 
    ) {
       parent::__construct($context);
       $this->_fileFactory = $fileFactory;
       parent::__construct($context);
    }
    public function execute()
    {   
        echo "Do Action Here ....";
        exit();

    }
}

After Run This Command

php bin/magento set:up
php bin/magento c:c
php bin/magento c:f

After Click on the Button you see this echo Message in your Screen

Note: Please put your Route ID and Controller Name which your are used

I Hope This Helps You.