How to Create a Sliding Modal Popup on Custom Button in Magento2 admin

Question

How can we create a modal popup on a custom button like it does when we click on the "Add Attribute" button when editing the product in the backend.

I want to create a similar feature on a custom button under the category page.

I went through many links but not able to get a complete solution for this.

What I have done so far is -

Add Button - Block/Adminhtml/Category/Edit/DeleteCatButton.php

public function getButtonData()
{
    $category = $this->getCategory();

    if (!$category->isReadonly() && $this->hasStoreRootCategory()) {
        return [
    'label' => __('Add New Item'),
    'class' => 'primary button-add-item',
    'data_attribute' => [
        'mage-init' => [
            'Magento_Ui/js/form/button-adapter' => [
                'actions' => [
                    [
                        'targetName' => 'item_form.item_form.item_form_modal',
                        'actionName' => 'toggleModal'
                    ],
                    [
                        'targetName' => 'item_form.item_form.item_form_modal.insert_item_form',
                        'actionName' => 'render'
                    ]
                ]
            ]
        ]
    ],
    'on_click' => '',
    'sort_order' => 20
];
    }

    return [];
}

Virtual Type - etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="Custom\Dcat\Ui\DataProvider\Item\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="item-form-modal" xsi:type="array">
                <item name="class" xsi:type="string">Custom\Dcat\Ui\DataProvider\Item\Form\Modifier\Item</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
    </arguments>
</virtualType>

<type name="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider">
    <arguments>
        <argument name="pool" xsi:type="object">Custom\Dcat\Ui\DataProvider\Item\Form\Modifier\Pool</argument>
    </arguments>
</type>

DataProvider - Ui/DataProvider/Item/Form/Modifier/Item.php

<?php
namespace Custom\Dcat\Ui\DataProvider\Item\Form\Modifier;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;

class Item extends AbstractModifier
{
/**
 * @var ArrayManager
 * @since 101.0.0
 */
protected $arrayManager;

/**
 * @param ArrayManager $arrayManager
 */

public function __construct(
    ArrayManager $arrayManager,
) {
    $this->arrayManager = $arrayManager;
}

private function DuplicateCatModal(array $meta)
{
    return $this->arrayManager->set(
    'item_form_modal',
    $meta,
    [
        'arguments' => [
            'data' => [
                'config' => [
                    'isTemplate' => false,
                    'componentType' => 'modal',
                    'options' => [
                        'title' => __('New Item'),
                    ],
                    'imports' => [
                        'state' => '!index=insert_item_form:responseStatus'
                    ],
                ],
            ],
        ],
        'children' => [
            'insert_item_form' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => '',
                            'componentType' => 'container',
                            'component' => 'Magento_Ui/js/form/components/insert-form',
                            'dataScope' => '',
                            'update_url' => $this->urlBuilder->getUrl('mui/index/render'),
                            'render_url' => $this->urlBuilder->getUrl(
                                'mui/index/render_handle',
                                [
                                    'handle' => 'megamenuadmin_item_form',
                                    'store' => $this->_storeManager->getStore()->getId(),
                                    'buttons' => 1
                                ]
                            ),
                            'autoRender' => false,
                            'ns' => 'item_add_form',
                            'externalProvider' => 'item_add_form.item_add_form_data_source',
                            'toolbarContainer' => '${ $.parentName }',
                            'formSubmitType' => 'ajax',
                        ],
                    ],
                ]
            ]
        ]
    ]
);
}
}
?>

But after this, when browsing the admin under the Category section, I get my button but when I click, nothing happens

Help would be much appreciated. Thanks in advance.

Answer 1

Add Following code in 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">actionDone</item>
                            </item>
                        </item>
                    </item>
                </option>
                <option name="title" xsi:type="string">CUSTOM MODEL</option>
            </options>
            <onCancel>actionDone</onCancel>
        </settings>
        <fieldset name="general" sortOrder="10">
            <settings>
                <label/>
            </settings>
            <field name="test1" sortOrder="10" formElement="input">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Test 1</label>
                    <dataScope>test1</dataScope>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                </settings>
            </field>
            <field name="test2" sortOrder="20" formElement="textarea">
                <settings>
                    <label translate="true">Test 2</label>
                    <dataType>text</dataType>
                    <dataScope>test2</dataScope>
                </settings>
            </field>
        </fieldset>
    </modal>
</form>

Add following code in 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
        ];
    }
}

you will get what you looking for :D