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.

<?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 :

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

Happy Coding !!

Ashish Kumar
2 Badges

27 April 2022