Open UI Form In Modal PopUp In Adobe Commerce
In this blog, we will see how to create an Ui form in a modal pop-up in adobe commerce.
Yes, like admin grid, we can also create forms using the Ui component and open that form in a modal popup through the Ui component.
Before we will use the tempate and jQuery for creating modal pop-up in the grid but as per the adobe commerce standards we have to use Ui component modal for the grid actions where we do not have to redirect a page and it will works on the same page.
Suppose we want to create an employee add/edit form in the admin with a grid. If you use Ui form in a modal popup you don’t need to create a new layout or page you can add or edit on the same page itself. Also, the grid data will refresh without page loading when you edit any data.
Now follow the steps to create a UI form in the modal popup.
1:- Create a new module.
2:- First, you have to create a router for the controller. Create ‘routes.xml’ in folder ‘Webkul/UiForm/etc/adminhtml’
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="uiform" frontName="uiform">
<module name="Webkul_UiForm"/>
</route>
</router>
</config>
3:– Now create a controller. Create an ‘Edit.php’ in the folder ‘Webkul/UiForm/Controller/Adminhtml/Employee’.
<?php
namespace Webkul\UiForm\Controller\Adminhtml\Employee;
use Magento\Framework\Controller\ResultFactory;
class Edit extends \Magento\Backend\App\Action
{
/**
* @return \Magento\Backend\Model\View\Result\Page
*/
public function execute()
{
$resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
return $resultPage;
}
}
4:- Second, add the ‘uiform_employee_edit.xml’ file in folder ‘Webkul/UiForm/view/adminhtml/layout’
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="employee_manage_form"/>
</referenceContainer>
</body>
</page>
5:- Add the ’employee_manage_form.xml’ form file in folder ‘Webkul/UiForm/view/adminhtml/ui_component’.
<?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">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">employee_manage_form.employee_manage_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Employee</item>
<item name="reverseMetadataMerge" xsi:type="boolean">true</item>
</argument>
<settings>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
<deps>
<dep>employee_manage_form.employee_manage_form_data_source</dep>
</deps>
</settings>
<dataSource name="employee_manage_form_data_source">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
<dataProvider class="Webkul\UiForm\Ui\DataProvider\Employee" name="employee_manage_form_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<fieldset name="employee-details">
<settings>
<label translate="true">Employee Details</label>
</settings>
<modal name="employee_modal">
<settings>
<options>
<option name="title" xsi:type="string" translate="true">Add/Update Employee</option>
</options>
</settings>
<insertForm name="employee_form_loader" component="Webkul_UiForm/js/form/components/insert-form">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="employeeListingProvider" xsi:type="string">ns = employee_listing, index = employee_listing</item>
<item name="employeeModalProvider" xsi:type="string">${ $.parentName }</item>
</item>
</argument>
<settings>
<formSubmitType>ajax</formSubmitType>
<renderUrl path="mui/index/render_handle">
<param name="handle">employee_details_manage</param>
<param name="buttons">1</param>
</renderUrl>
<loading>false</loading>
<toolbarContainer>${ $.parentName }</toolbarContainer>
<externalProvider>${ $.ns }.employee_form_data_source</externalProvider>
<ns>employee_form</ns>
</settings>
</insertForm>
</modal>
<button name="modal_button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="title" xsi:type="string">Add Employee</item>
<item name="formElement" xsi:type="string">container</item>
<item name="buttonClasses" xsi:type="string">add-new-emp-button</item>
<item name="actions" xsi:type="array">
<item name="0" xsi:type="array">
<item name="targetName" xsi:type="string">${ $.parentName}.employee_modal.employee_form_loader</item>
<item name="actionName" xsi:type="string">destroyInserted</item>
</item>
<item name="1" xsi:type="array">
<item name="targetName" xsi:type="string">${ $.parentName}.employee_modal</item>
<item name="actionName" xsi:type="string">openModal</item>
</item>
<item name="2" xsi:type="array">
<item name="targetName" xsi:type="string">${ $.parentName}.employee_modal.employee_form_loader</item>
<item name="actionName" xsi:type="string">render</item>
</item>
</item>
</item>
</argument>
</button>
<insertListing name="employee_listing" component="Magento_Customer/js/form/components/insert-listing">
<settings>
<dataLinks>
<exports>false</exports>
<imports>true</imports>
</dataLinks>
<externalProvider>employee_listing.employee_listing_data_source</externalProvider>
<selectionsProvider>employee_listing.employee_listing.employee_columns.ids</selectionsProvider>
<autoRender>true</autoRender>
<dataScope>employee_listing</dataScope>
<ns>employee_listing</ns>
</settings>
</insertListing>
</fieldset>
</form>
6:- Now add the Employee.php file in folder ‘Webkul/UiForm/Ui/DataProvider’
<?php
namespace Webkul\UiForm\Ui\DataProvider;
use Webkul\UiForm\Model\ResourceModel\Employee\CollectionFactory;
class Employee extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @var array
*/
public $loadedData;
/**
* @var CollectionFactory
*/
protected $collection;
/**
* __construct function
*
* @param [type] $name
* @param [type] $primaryFieldName
* @param [type] $requestFieldName
* @param CollectionFactory $collectionFactory
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* GetData function
*
* @return void
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$collectionData = $this->collection->getData();
$this->loadedData['employee-details'] = $collectionData;
return $this->loadedData;
}
}
7:- Create the employee list employee_listing.xml in folder ‘Webkul/UiForm/view/adminhtml/ui_component’
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">employee_listing.employee_listing_data_source</item>
</item>
</argument>
<settings>
<spinner>employee_columns</spinner>
<deps>
<dep>employee_listing.employee_listing_data_source</dep>
</deps>
</settings>
<dataSource name="employee_listing_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<updateUrl path="mui/index/render"/>
</settings>
<dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="employee_listing_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<listingToolbar name="listing_top">
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<filters name="listing_filters"/>
<massaction name="listing_massaction" component="Magento_Ui/js/grid/tree-massactions">
<action name="delete">
<settings>
<confirm>
<message translate="true">Are you sure you want to delete the selected price rule?</message>
<title translate="true">Delete Price Rule</title>
</confirm>
<url path="expedia/pricerule/massDelete"/>
<type>delete</type>
<label translate="true">Delete</label>
</settings>
</action>
</massaction>
<paging name="listing_paging"/>
</listingToolbar>
<columns name="employee_columns" class="Magento\Ui\Component\Listing\Columns">
<selectionsColumn name="ids" sortOrder="10">
<settings>
<indexField>entity_id</indexField>
</settings>
</selectionsColumn>
<column name="name" sortOrder="20">
<settings>
<filter>text</filter>
<label translate="true">Employee Name</label>
</settings>
</column>
<column name="emp_id" sortOrder="20">
<settings>
<filter>text</filter>
<label translate="true">Employee Name</label>
</settings>
</column>
<column name="emp_address" sortOrder="20">
<settings>
<filter>text</filter>
<label translate="true">Employee Name</label>
</settings>
</column>
<actionsColumn name="actions" class="Webkul\UiForm\Ui\Component\Listing\Column\Action" component="Magento_Customer/js/grid/columns/actions">
<settings>
<indexField>entity_id</indexField>
</settings>
</actionsColumn>
</columns>
</listing>
8:- Add column action Action.php in ‘Webkul/UiForm/Ui/Component/Listing/Column’
<?php
namespace Webkul\UiForm\Ui\Component\Listing\Column;
use Magento\Framework\UrlInterface;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
/**
* Prepare actions column for customer addresses grid
*/
class Action extends Column
{
/**
* @var UrlInterface
*/
private $urlBuilder;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param UrlInterface $urlBuilder
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = [],
array $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource): array
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as &$item) {
$name = $this->getData('name');
if (isset($item['entity_id'])) {
$item[$name]['edit'] = [
'callback' => [
[
'provider' => 'employee_manage_form.areas.employee-details'
.'.employee-details.employee_modal.employee_form_loader',
'target' => 'destroyInserted',
],
[
'provider' => 'employee_manage_form.areas.employee-details'
.'.employee-details.employee_modal',
'target' => 'openModal',
],
[
'provider' => 'employee_manage_form.areas.employee-details'
.'.employee-details.employee_modal.employee_form_loader',
'target' => 'render',
'params' => [
'id' => $item['entity_id'],
],
]
],
'href' => '#',
'label' => __('Edit'),
'hidden' => false,
];
}
}
}
return $dataSource;
}
}
9:- And in last add the component insert-form.js in folder ‘app/code/Webkul/UiForm/view/adminhtml/web/js/form/components/insert-form.js’
define([
'Magento_Ui/js/form/components/insert-form'
], function (Insert) {
'use strict';
return Insert.extend({
defaults: {
listens: {
responseData: 'onResponse'
},
modules: {
employeeListing: '${ $.employeeListingProvider }',
employeeModal: '${ $.employeeModalProvider }'
}
},
/**
* Close modal, reload price rule listing and save
*
* @param {Object} responseData
*/
onResponse: function (responseData) {
if (!responseData.error) {
this.employeeModal().closeModal();
this.employeeListing().reload({
refresh: true
});
}
}
});
});
For example you can also see the below image of the modal pop-up form. As, you can see the form where you can add and edit the employee details using the Ui component form after updating the data it will update the grid data without reloading the page.
For creating the Ui form through Ui component you can also follow our blog. Click here.
That’s all about to create a Ui form with the modal pop-up in the admin panel using the Ui component.
Thank you for reading this article on how to create a Ui form in a modal pop-up using Ui Components in Magento 2 Adobe Commerce, we hope you liked it.
You can also view our wide range of ready-to-use Adobe commerce extensions.
Furthermore, If for any more queries, please reach out to our team via support ticket.
View Comments
Comment or Ask a Question
Quick Links