Reading list Switch to dark mode

    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,


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

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published.

    Be the first to comment.

    Back to Top
    Sumit was incredibly responsive and helpful to helping us set-up our system. I have never encountered such helpful and quick IT response before.
    Elizabeth Bennett-Parker
    Talk to Sales


    Live Chat

    Message Sent!

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

    Back to Home