2

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.

0

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

| improve this answer | |
  • Thank you so much Mate. Its working :) – hardik malkani Jan 10 at 6:18
  • happy to help you.! @hardikmalkani upvote the answer :D – Hiren Jan 16 at 7:41
  • I am new to this so for upvote,i need atleast 15 reputations. I tried but that is the reason i am not able to upvote your answer :) – hardik malkani Jan 16 at 7:51
  • Can you answer this too - magento.stackexchange.com/questions/300935/… . This is in continue of the above Question. Ofcourse, if you know the answer :D – hardik malkani Jan 16 at 7:53

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.