Back to Top

Sliding Panels in Magento 2 Admin

Updated 6 May 2022

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,


Add the following code to the product_form.xml file.

Searching for an experienced
Magento 2 Company ?
Find out More
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
            <button name="openModel" class="Vendor\Extension\Block\Adminhtml\Product\Edit\AddModelButton"/>
    <modal name="test_model">
                <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>
                <option name="title" xsi:type="string">CUSTOM MODEL</option>
        <fieldset name="general" sortOrder="10">
            <field name="test1" sortOrder="10" formElement="input">
                    <label translate="true">Test 1</label>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
            <field name="test2" sortOrder="20" formElement="textarea">
                    <label translate="true">Test 2</label>

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


Button Code :

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 !!

. . .

Leave a Comment

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

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home