Read More
Read More
Menu Close

    Sliding Panels in Magento 2 Admin

    We are going to create Sliding Panels in the Magento 2 Admin by clicking on a custom button.

    Create a custom button on the product add/edit page and on the button click, open a popup with some fields/contents.

    Add a custom button (SlidePanel) to the product edit page.

    For this, need to make some changes to a product-form.xml file,

    app\code\Vendor\Extension\view\adminhtml\ui_component\product_form.xml

    Add the following code to the product_form.xml file.

    Searching for an experienced
    Magento 2 Company ?
    Read More
    <?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\Extension\Block\Adminhtml\Product\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>

    While declaring the button, we defined a class for it. Let’s add the below code at the path

    app\code\Vendor\Extenstion\Block\Adminhtml\Product\Edit\AddModelButton.php

    Button Code :

    <?php
     
    namespace Vendor\Extension\Block\Adminhtml\Product\Edit;
     
    use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
     
    class AddModelButton implements ButtonProviderInterface
    {
        public function getButtonData()
        {
            return [
                'label' => __('Slide Panel'),
                'class' => 'action-secondary',
                'data_attribute' => [
                    'mage-init' => [
                        'Magento_Ui/js/form/button-adapter' => [
                            'actions' => [
                                [
                                    'targetName' => 'product_form.product_form.test_model',
                                    'actionName' => 'toggleModal'
                                ]
                            ]
                        ]
                    ]
                ],
                'on_click' => '',
                'sort_order' => 10
            ];
        }
    }

    Run the following commands :

    php bin/magento s:up
    php bin/magento s:d:c
    php bin/magento c:f

    The result will be :

    Sliding Panels in Magento 2 Admin
    Sliding Panels in Magento 2 Admin

    This is a custom sliding panel or popup in the admin panel.

    Happy Coding !!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top