How to create a modal window in a custom field with a code in Magento 2

In this article, we will show how to create a modal window with custom fields and add it to the existing UI form. Moreover, we will show you the example of such a modal in Magento 2. Let’s begin.

First, we need to create a Vendor_Module module:

1. Create a directory app/code/Vendor/Module
2. Create a registration file app/code/Vendor/Module/registration.php with the following content:

3. Create a composer file (if you plan to transfer the module) app/code/Vendor/Module/composer.json :

4. Now, create the module’s main XML-file app/code/Vendor/Module/etc/module.xml with the dependency from the Magento_Catalog module because our modal window will be added to its form:

The preparation is done. Now, some more details.

You can see the new module in the Magento modules list by entering the following: bin/magento module:status

Then, you need to enable it with the following command: bin/magento module:enable Vendor_Module

Next, execute bin/magento setup:upgrade. After that, our module should be displayed in the system. However, it contains nothing at the moment. For the code starts working add the following:

Create a file app/code/Vendor/Module/etc/adminhtml/di.xml. We are going to place a modifier inside:

The modifier is responsible for data addition and some manipulations with elements and UI-form components. There are 2 main methods that came from the modifier’s interface (they should always present):

We can add any data to our UI-form in the modifyData method or we can delete/modify the existing product data during the form creation. All the existing UI-form data will be displayed in the input value. Pay attention to the Sort Order of your modifier. A lot of data can be added to the following modifier.

We can add our UI components and elements in the modifyMeta method. In the example below we are going to add a simple modal window to the custom options fieldset with multiple elements.

Our modifier will be inherited from an abstract modifier for the Catalog_Product (vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/AbstractModifier.php) module and will be located here: app/code/Vendor/Module/Ui/DataProvider/Product/Form/Modifier/CustomModal.php

Note! You can find the available UI components here: vendor/magento/module-ui/Component. It will be useful to look through the subfolders and see what the default Magento_UI module provides, before start utilizing it.

Let’s fill in our modifier’s file with the base content (namespace, class name, etc):

Now, it should be processed without any changes. Then, add the first UI-form element, a link, a modal window that should be called after hitting the link, and multiple fields to the modal window’s container.

When the product form is downloaded, Magento will collect all the modifiers and sort them in the chosen order. Then, the modifyData and modifyMeta methods will be called for each modifier. Our link (button) and a modal window will be added at the same moment. The only problem is to save this data because the default saving is used and duplicated in our window:

and if the selected fields are not in the product, they won’t be saved. You should use an observer or create your own model for saving and sending data using ajax to override the default saving.

The modal window will look like that:

A button to open the window:

You can change its look from the link to the default button by modifying the line from:

‘displayAsLink’ => true,

to:

‘displayAsLink’ => false,

Then, the display will change in the following way:

The data from our modal window will be send in the following way during the product saving:

in the product saving controller (vendor/magento/module-catalog/Controller/Adminhtml/Product/Save.php):

If you still got questions, feel free to ask them in the comments below.