How to create Form action on click of a Button under Modal Widget

Question

I have created a modal widget on a category section under Admin. A custom button is created along with Save and when we click on that button, it opens a modal with custom form.

Inside that form, there is a Done button. What i want is, when we click on Done, the form values should redirect and save those values in the database. So for this, i have to create an action which should fire on Done button.

So can someone help me here.

What i have done so far is -

Add Button on Category section - app/code/Vendor/Module/Block/Adminhtml/Category/Edit/AddModelButton.php

<?php

namespace Vendor\Module\Block\Adminhtml\Category\Edit;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Catalog\Block\Adminhtml\Category\AbstractCategory;

class AddModelButton extends AbstractCategory implements 
ButtonProviderInterface
{
public function getButtonData()
{
    return [
        'label' => __('Open Model'),
        'class' => 'action-secondary',
        'data_attribute' => [
            'mage-init' => [
                'Magento_Ui/js/form/button-adapter' => [
                    'actions' => [
                        [
                            'targetName' => 'category_form.category_form.test_model',
                            'actionName' => 'toggleModal'
                        ]
                    ]
                ]
            ]
        ],
        'on_click' => '',
        'sort_order' => 20
    ];
}
}

ui_component : app/code/Vendor/Module/view/adminhtml/ui_component/category_form.xml

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

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<settings>
    <buttons>
        <button name="openModel" class="Vendor\Module\Block\Adminhtml\Category\Edit\AddModelButton"/>
    </buttons>
</settings>
<modal name="test_model">
    <settings>
        <options>
            <option name="buttons" xsi:type="array">
                <item name="0" xsi:type="array">
                    <item name="text" xsi:type="string">Done</item>
                    <item name="class" xsi:type="string">action-primary</item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.name }</item>
                            <item name="actionName" xsi:type="string">save</item>
                        </item>
                    </item>
                </item>
            </option>
            <option name="title" xsi:type="string">CUSTOM MODEL</option>
        </options>
        <onCancel>closeModal</onCancel>
        <deps>
        <dep>category_form.category_form_data_source</dep>
    </deps>
    </settings>
    <dataSource name="category_form_data_source">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
    </argument>
    <settings>
        <validateUrl path="catalog/category/validate"/>
        <submitUrl path="catalog/category/save"/>
    </settings>
    <dataProvider class="Magento\Catalog\Model\Category\DataProvider" name="category_form_data_source">
        <settings>
            <requestFieldName>id</requestFieldName>
            <primaryFieldName>entity_id</primaryFieldName>
        </settings>
    </dataProvider>
</dataSource>
    <fieldset name="general" sortOrder="10">
        <settings>
            <label/>
        </settings>
        <field name="category_name" sortOrder="10" formElement="input">
            <settings>
                <dataType>text</dataType>
                <label translate="true">Category Name</label>
                <dataScope>category_name</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
            </settings>
        </field>
        <field name="test_products" sortOrder="20" formElement="checkbox">
            <settings>
                <label translate="true">Test Products</label>
                <dataType>boolean</dataType>
                <dataScope>test_products</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
            </settings>
            <formElements>
            <checkbox>
                <settings>
                    <valueMap>
                        <map name="false" xsi:type="string">0</map>
                        <map name="true" xsi:type="string">1</map>
                    </valueMap>
                    <prefer>toggle</prefer>
                </settings>
            </checkbox>
        </formElements>
        </field>
    </fieldset>
</modal>

So with ui_component, how can i fire an event on Done button so i can do my code in that controller.

Help would be much appreciated. Thanks in advance.

Answer 1

Update app/code/Vendor/Module/view/adminhtml/ui_component/category_form.xml with below code

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

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <settings>
        <buttons>
            <button name="openModel" class="Vendor\Module\Block\Adminhtml\Category\Edit\AddModelButton"/>
        </buttons>
    </settings>
    <modal name="test_model" component="Vendor_Module/js/modal/component">
        <settings>
            <options>
                <option name="buttons" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="text" xsi:type="string">Done</item>
                        <item name="class" xsi:type="string">action-primary</item>
                        <item name="actions" xsi:type="array">
                            <item name="0" xsi:type="string">saveData</item>
                        </item>
                    </item>
                </option>
                <option name="title" xsi:type="string">CUSTOM MODEL</option>
            </options>
            <onCancel>closeModal</onCancel>
            <deps>
                <dep>category_form.category_form_data_source</dep>
            </deps>
        </settings>
        <dataSource name="category_form_data_source">
            <argument name="data" xsi:type="array">
                <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
                </item>
            </argument>
            <settings>
                <validateUrl path="catalog/category/validate"/>
                <submitUrl path="catalog/category/save"/>
            </settings>
            <dataProvider class="Magento\Catalog\Model\Category\DataProvider" name="category_form_data_source">
                <settings>
                    <requestFieldName>id</requestFieldName>
                    <primaryFieldName>entity_id</primaryFieldName>
                </settings>
            </dataProvider>
        </dataSource>
        <fieldset name="general" sortOrder="10">
            <settings>
                <label/>
            </settings>
            <field name="category_name" sortOrder="10" formElement="input">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Category Name</label>
                    <dataScope>category_name</dataScope>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">false</rule>
                    </validation>
                </settings>
            </field>
            <field name="test_products" sortOrder="20" formElement="checkbox">
                <settings>
                    <label translate="true">Test Products</label>
                    <dataType>boolean</dataType>
                    <dataScope>test_products</dataScope>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">false</rule>
                    </validation>
                </settings>
                <formElements>
                    <checkbox>
                        <settings>
                            <valueMap>
                                <map name="false" xsi:type="string">0</map>
                                <map name="true" xsi:type="string">1</map>
                            </valueMap>
                            <prefer>toggle</prefer>
                        </settings>
                    </checkbox>
                </formElements>
            </field>
        </fieldset>
    </modal>
</form>

Add new JS file : app/code/VENDOR/MODULE/view/adminhtml/web/js/modal/component.js

define(['underscore', 'jquery', 'Magento_Ui/js/modal/modal-component', 'mage/url'], function (_, $, Modal, url) 
{
    'use strict';

    return Modal.extend(
    {
        saveData: function () 
        {
            this.applyData();

            var ajaxUrl = url.build('frontname/index/save');

            var data = {
                'form_key': window.FORM_KEY,
                'data' : this.applied
            };

            $.ajax(
            {
                type: 'POST',
                url: ajaxUrl,
                data: data,
                showLoader: true
            }).done(function (xhr) 
            {
                if (xhr.error) 
                {
                    self.onError(xhr);
                }
            }).fail(this.onError);

            this.closeModal();
        },
    });
});

Now you just need to create a controller file, do some changes in JS file as per the requirement if needed