---
title: "How To Add Or Create Slide-out(Sliding) ,Modal Windows Panels in Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-or-create-slide-outsliding-modal-windows-panels-in-magento-2"
date: "2023-04-02T12:52:04+05:30"
modified: "2023-08-28T07:02:58+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 785
reading_time: "4 min read"
summary: "Magento application it is often necessary to focus the user’s attention on some particular bit of content or isolated action, process or sub-process. A “Slide-out Panel”, “Modal Window” o..."
description: "Magento application it is often necessary to focus the user’s attention on some particular bit of content or isolated action, process or sub-process. A “..."
keywords: "Slide-out,modal, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "All You Need to Know About the Magento Open Source 2.4.9-Alpha Update"
    url: "https://dolphinwebsolution.com/blog/need-to-know-about-magento-open-source-alpha-update/"
  - title: "How to Fix Unique Constraint Violation Found in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-fix-unique-constraint-violation-found-in-magento-2"
  - title: "How to include & add custom js in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-include-add-custom-js-in-magento-2"
---

# How To Add Or Create Slide-out(Sliding) ,Modal Windows Panels in Magento 2

_Published: April 2, 2023_  
_Author: Jigar Patel_  

![How-To-Add-Or-Create-Slide-outSliding-Panels-in-Magento-2](https://dolphinwebsolution.com/wp-content/uploads/2023/03/How-To-Add-Or-Create-Slide-outSliding-Panels-in-Magento-2-1024x536.png)

Magento application it is often necessary to focus the user’s attention on some particular bit of content or isolated action, process or sub-process. A “Slide-out Panel”, “Modal Window” or “Overlay” is an effective way to achieve this. These are triggered by a particular user action causing their current task to be interrupted.

### Use of Slide-out Panels (aka “Slideouts”)
Slide-out panels should be used for tertiary actions or sub-processes related to the user’s primary path. These panels allow for greater content and/or more complex interactions thus behaving much like an additional webpage while maintaining a contextual connection to the primary task.

### Anatomy of Slideout

The active panel should include the following elements:

- Content container (Panel)
- A Page title
- Close control “×” (ESC-key via keyboard)
- Button bar for actions, including a “Cancel” (ESC-key is Cancel via keyboard)
- Page Content
- “Shade” to disable lower-level page

> Like to Read: [How To Add HTML note in UI component form field.](https://dolphinwebsolution.com/how-to-add-html-note-in-ui-component-form-field)

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.

## Steps to Add Or Create Slide-out(Sliding) Panels in Magento 2

We are already learned [how to create a basic module in Magento 2](https://dolphinwebsolution.com/how-to-create-module-in-magento-2). We need to create **module.xml** and **registration.php** files. You can create **module.xml** and **registration.php** from this tutorial.

Here we use **Dolphin** as the Vendor name and **Sliding** as the module’s name. You can change this according to your Vendor and Module name.

#### Step 1: Create a Ui-Component File
Now we create a UI-component file **product\_form.xml** in **app/code/Dolphin/Sliding/view/adminhtml/ui\_component** folder with the following code.

```
<?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="Dolphin\Sliding\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">Dolphin MODEL</option>
            </options>
            <onCancel>actionDone</onCancel>
        </settings>
        <fieldset name="general" sortOrder="10">
            <settings>
                <label/>
            </settings>
            <field name="field1" sortOrder="10" formElement="input">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Dolphin Custom Field 1</label>
                    <dataScope>dwsfield1</dataScope>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">false</rule>
                    </validation>
                </settings>
            </field>
            <field name="field2" sortOrder="20" formElement="textarea">
                <settings>
                    <label translate="true">Dolphin Custom Field 2</label>
                    <dataType>text</dataType>
                    <dataScope>dwsfield2</dataScope>
                </settings>
            </field>
        </fieldset>
    </modal>
</form>
```

In the above code, we have two main tags- settings and modal tag. While declaring the button, we defined a class for it. This class will be used to make that button functional.

#### Step 2: Create a block class
Create block class file **AddModelButton.php** in **app/code/Dolphin/Sliding/Block/Adminhtml/Product/Edit** folder with the following code.

```
<?php

namespace Dolphin\Sliding\Block\Adminhtml\Product\Edit;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class AddModelButton implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Dolphin 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
        ];
    }
}
```

**Now execute the below command:**

**php bin/magento s:up**
**php bin/magento s:d:c**
**php bin/magento s:s:d -f**
**php bin/magento c:c**
**Result:**

![How To Add Or Create Slide-out(Sliding) ,Modal Windows Panels in Magento 2](https://dolphinwebsolution.com/wp-content/uploads/2023/04/Joust-Duffle-Bag-Products-Inventory-Catalog-Magento-Admin.png)

![How To Add Or Create Slide-out(Sliding) ,Modal Windows Panels in Magento 2](https://dolphinwebsolution.com/wp-content/uploads/2023/04/Joust-Duffle-Bag-Products-Inventory-Catalog-Magento-Admin-1.png)

I Hope, This instruction will be helpful for you.
**Happy Coding with magento2!! ?**
If you have any difficulties regarding this blog, do consider posting them in the Comments section below!

I’m here to help.
Thank you!


---

_View the original post at: [https://dolphinwebsolution.com/how-to-add-or-create-slide-outsliding-modal-windows-panels-in-magento-2](https://dolphinwebsolution.com/how-to-add-or-create-slide-outsliding-modal-windows-panels-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:14:50 UTC_