1

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.

  • hi hardik, i have posted the answer – Hiren Jan 17 at 10:28
2

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

| improve this answer | |
  • 1
    Superb, that is working. Thank you so much. – hardik malkani Feb 29 at 9:40
  • I've been searching quite some days for this, it's so frustrating ... having to deal with so many things just to make a button work – medmek Jun 4 at 3:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.