{"id":369368,"date":"2023-03-29T12:27:58","date_gmt":"2023-03-29T12:27:58","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=369368"},"modified":"2024-05-23T13:08:02","modified_gmt":"2024-05-23T13:08:02","slug":"open-ui-form-in-modal-popup-in-adobe-commerce","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/","title":{"rendered":"Open UI Form In Modal PopUp In Adobe Commerce"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Now follow the steps to create a UI form in the modal popup.<\/strong><\/h2>\n\n\n\n

1:-<\/strong> Create a new module<\/a>.<\/p>\n\n\n\n

2:-<\/strong> First, you have to create a router for the controller. Create \u2018routes.xml\u2019 in folder \u2018Webkul\/UiForm\/etc\/adminhtml\u2019<\/p>\n\n\n\n

<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App\/etc\/routes.xsd">\n    <router id="admin">\n        <route id="uiform" frontName="uiform">\n            <module name="Webkul_UiForm"\/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n
3:<\/strong>– Now create a controller. Create an \u2018Edit.php\u2019 \u00a0in the folder \u2018Webkul\/UiForm\/Controller\/Adminhtml\/Employee\u2019.<\/p>\n\n\n\n
<?php\nnamespace Webkul\\UiForm\\Controller\\Adminhtml\\Employee;\n\nuse Magento\\Framework\\Controller\\ResultFactory;\n\nclass Edit extends \\Magento\\Backend\\App\\Action\n{\n    \/**\n     * @return \\Magento\\Backend\\Model\\View\\Result\\Page\n     *\/\n    public function execute()\n    {\n        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);\n        return $resultPage;\n    }\n}<\/pre>\n\n\n\n
4:- <\/strong>Second, add the  \u2018uiform_employee_edit.xml\u2019 file in folder \u2018Webkul\/UiForm\/view\/adminhtml\/layout\u2019<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <update handle="styles"\/>\n    <body>\n        <referenceContainer name="content">\n            <uiComponent name="employee_manage_form"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
5:-<\/strong>  Add the  \u2019employee_manage_form.xml\u2019 form file in folder \u2018Webkul\/UiForm\/view\/adminhtml\/ui_component\u2019.<\/p>\n\n\n\n
<?xml version="1.0" encoding="UTF-8"?>\n<form xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n    <argument name="data" xsi:type="array">\n        <item name="js_config" xsi:type="array">\n            <item name="provider" xsi:type="string">employee_manage_form.employee_manage_form_data_source<\/item>\n        <\/item>\n        <item name="label" xsi:type="string" translate="true">Employee<\/item>\n        <item name="reverseMetadataMerge" xsi:type="boolean">true<\/item>\n    <\/argument>\n\n    <settings>\n        <layout>\n            <navContainerName>left<\/navContainerName>\n            <type>tabs<\/type>\n        <\/layout>\n        <deps>\n            <dep>employee_manage_form.employee_manage_form_data_source<\/dep>\n        <\/deps>\n    <\/settings>\n\n    <dataSource name="employee_manage_form_data_source">\n        <argument name="data" xsi:type="array">\n            <item name="js_config" xsi:type="array">\n                <item name="component" xsi:type="string">Magento_Ui\/js\/form\/provider<\/item>\n            <\/item>\n        <\/argument>\n        <dataProvider class="Webkul\\UiForm\\Ui\\DataProvider\\Employee" name="employee_manage_form_data_source">\n            <settings>\n                <requestFieldName>id<\/requestFieldName>\n                <primaryFieldName>entity_id<\/primaryFieldName>\n            <\/settings>\n        <\/dataProvider>\n    <\/dataSource>\n    <fieldset name="employee-details">\n        <settings>\n            <label translate="true">Employee Details<\/label>\n        <\/settings>\n        <modal name="employee_modal">\n            <settings>\n                <options>\n                    <option name="title" xsi:type="string" translate="true">Add\/Update Employee<\/option>\n                <\/options>\n            <\/settings>\n            <insertForm name="employee_form_loader" component="Webkul_UiForm\/js\/form\/components\/insert-form">\n                <argument name="data" xsi:type="array">\n                    <item name="config" xsi:type="array">\n                        <item name="employeeListingProvider" xsi:type="string">ns = employee_listing, index = employee_listing<\/item>\n                        <item name="employeeModalProvider" xsi:type="string">${ $.parentName }<\/item>\n                    <\/item>\n                <\/argument>\n                <settings>\n                    <formSubmitType>ajax<\/formSubmitType>\n                    <renderUrl path="mui\/index\/render_handle">\n                        <param name="handle">employee_details_manage<\/param>\n                        <param name="buttons">1<\/param>\n                    <\/renderUrl>\n                    <loading>false<\/loading>\n                    <toolbarContainer>${ $.parentName }<\/toolbarContainer>\n                    <externalProvider>${ $.ns }.employee_form_data_source<\/externalProvider>\n                    <ns>employee_form<\/ns>\n                <\/settings>\n            <\/insertForm>\n        <\/modal>\n        <button name="modal_button">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="title" xsi:type="string">Add Employee<\/item>\n                    <item name="formElement" xsi:type="string">container<\/item>\n                    <item name="buttonClasses" xsi:type="string">add-new-emp-button<\/item>\n                    <item name="actions" xsi:type="array">\n                        <item name="0" xsi:type="array">\n                            <item name="targetName" xsi:type="string">${ $.parentName}.employee_modal.employee_form_loader<\/item>\n                            <item name="actionName" xsi:type="string">destroyInserted<\/item>\n                        <\/item>\n                        <item name="1" xsi:type="array">\n                            <item name="targetName" xsi:type="string">${ $.parentName}.employee_modal<\/item>\n                            <item name="actionName" xsi:type="string">openModal<\/item>\n                        <\/item>\n                        <item name="2" xsi:type="array">\n                            <item name="targetName" xsi:type="string">${ $.parentName}.employee_modal.employee_form_loader<\/item>\n                            <item name="actionName" xsi:type="string">render<\/item>\n                        <\/item>\n                    <\/item>\n                <\/item>\n            <\/argument>\n        <\/button>\n        <insertListing name="employee_listing" component="Magento_Customer\/js\/form\/components\/insert-listing">\n            <settings>\n                <dataLinks>\n                    <exports>false<\/exports>\n                    <imports>true<\/imports>\n                <\/dataLinks>\n                <externalProvider>employee_listing.employee_listing_data_source<\/externalProvider>\n                <selectionsProvider>employee_listing.employee_listing.employee_columns.ids<\/selectionsProvider>\n                <autoRender>true<\/autoRender>\n                <dataScope>employee_listing<\/dataScope>\n                <ns>employee_listing<\/ns>\n            <\/settings>\n        <\/insertListing>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
6:-<\/strong> Now add the Employee.php file in folder \u2018Webkul\/UiForm\/Ui\/DataProvider\u2019<\/p>\n\n\n\n
<?php\nnamespace Webkul\\UiForm\\Ui\\DataProvider;\n\nuse Webkul\\UiForm\\Model\\ResourceModel\\Employee\\CollectionFactory;\n\nclass Employee extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider\n{\n    \/**\n     * @var array\n     *\/\n    public $loadedData;\n\n    \/**\n     * @var CollectionFactory\n     *\/\n    protected $collection;\n\n    \/**\n     * __construct function\n     *\n     * @param [type] $name\n     * @param [type] $primaryFieldName\n     * @param [type] $requestFieldName\n     * @param CollectionFactory $collectionFactory\n     * @param array $meta\n     * @param array $data\n     *\/\n    public function __construct(\n        $name,\n        $primaryFieldName,\n        $requestFieldName,\n        CollectionFactory $collectionFactory,\n        array $meta = [],\n        array $data = []\n    ) {\n        $this->collection = $collectionFactory->create();\n        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n    }\n\n    \/**\n     * GetData function\n     *\n     * @return void\n     *\/\n    public function getData()\n    {\n        if (isset($this->loadedData)) {\n            return $this->loadedData;\n        }\n        $collectionData = $this->collection->getData();\n\n        $this->loadedData['employee-details'] = $collectionData;\n        return $this->loadedData;\n    }\n}<\/pre>\n\n\n\n
7:-<\/strong> Create the employee list employee_listing.xml in folder \u2018Webkul\/UiForm\/view\/adminhtml\/ui_component\u2019<\/p>\n\n\n\n
<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n    <argument name="data" xsi:type="array">\n        <item name="js_config" xsi:type="array">\n            <item name="provider" xsi:type="string">employee_listing.employee_listing_data_source<\/item>\n        <\/item>\n    <\/argument>\n    <settings>\n        <spinner>employee_columns<\/spinner>\n        <deps>\n            <dep>employee_listing.employee_listing_data_source<\/dep>\n        <\/deps>\n    <\/settings>\n    <dataSource name="employee_listing_data_source" component="Magento_Ui\/js\/grid\/provider">\n        <settings>\n            <updateUrl path="mui\/index\/render"\/>\n        <\/settings>\n        <dataProvider class="Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider" name="employee_listing_data_source">\n            <settings>\n                <requestFieldName>id<\/requestFieldName>\n                <primaryFieldName>entity_id<\/primaryFieldName>\n            <\/settings>\n        <\/dataProvider>\n    <\/dataSource>\n    <listingToolbar name="listing_top">\n        <bookmark name="bookmarks"\/>\n        <columnsControls name="columns_controls"\/>\n        <filters name="listing_filters"\/>\n        <massaction name="listing_massaction" component="Magento_Ui\/js\/grid\/tree-massactions">\n            <action name="delete">\n                <settings>\n                    <confirm>\n                        <message translate="true">Are you sure you want to delete the selected price rule?<\/message>\n                        <title translate="true">Delete Price Rule<\/title>\n                    <\/confirm>\n                    <url path="expedia\/pricerule\/massDelete"\/>\n                    <type>delete<\/type>\n                    <label translate="true">Delete<\/label>\n                <\/settings>\n            <\/action>\n        <\/massaction>\n        <paging name="listing_paging"\/>\n    <\/listingToolbar>\n    <columns name="employee_columns" class="Magento\\Ui\\Component\\Listing\\Columns">\n        <selectionsColumn name="ids" sortOrder="10">\n            <settings>\n                <indexField>entity_id<\/indexField>\n            <\/settings>\n        <\/selectionsColumn>\n        <column name="name" sortOrder="20">\n            <settings>\n                <filter>text<\/filter>\n                <label translate="true">Employee Name<\/label>\n            <\/settings>\n        <\/column>\n        <column name="emp_id" sortOrder="20">\n            <settings>\n                <filter>text<\/filter>\n                <label translate="true">Employee Name<\/label>\n            <\/settings>\n        <\/column>\n        <column name="emp_address" sortOrder="20">\n            <settings>\n                <filter>text<\/filter>\n                <label translate="true">Employee Name<\/label>\n            <\/settings>\n        <\/column>\n        <actionsColumn name="actions" class="Webkul\\UiForm\\Ui\\Component\\Listing\\Column\\Action" component="Magento_Customer\/js\/grid\/columns\/actions">\n            <settings>\n                <indexField>entity_id<\/indexField>\n            <\/settings>\n        <\/actionsColumn>\n    <\/columns>\n<\/listing><\/pre>\n\n\n\n
8:-<\/strong> Add column action  Action.php in \u2018Webkul\/UiForm\/Ui\/Component\/Listing\/Column\u2019<\/p>\n\n\n\n
<?php\nnamespace Webkul\\UiForm\\Ui\\Component\\Listing\\Column;\n\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\n\n\/**\n * Prepare actions column for customer addresses grid\n *\/\nclass Action extends Column\n{\n    \/**\n     * @var UrlInterface\n     *\/\n    private $urlBuilder;\n\n    \/**\n     * @param ContextInterface $context\n     * @param UiComponentFactory $uiComponentFactory\n     * @param UrlInterface $urlBuilder\n     * @param array $components\n     * @param array $data\n     *\/\n    public function __construct(\n        ContextInterface $context,\n        UiComponentFactory $uiComponentFactory,\n        UrlInterface $urlBuilder,\n        array $components = [],\n        array $data = []\n    ) {\n        $this->urlBuilder = $urlBuilder;\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n    }\n\n    \/**\n     * Prepare Data Source\n     *\n     * @param array $dataSource\n     * @return array\n     *\/\n    public function prepareDataSource(array $dataSource): array\n    {\n        if (isset($dataSource['data']['items'])) {\n            foreach ($dataSource['data']['items'] as &$item) {\n                $name = $this->getData('name');\n                if (isset($item['entity_id'])) {\n                    $item[$name]['edit'] = [\n                        'callback' => [\n                            [\n                                'provider' => 'employee_manage_form.areas.employee-details'\n                                    .'.employee-details.employee_modal.employee_form_loader',\n                                'target' => 'destroyInserted',\n                            ],\n                            [\n                                'provider' => 'employee_manage_form.areas.employee-details'\n                                    .'.employee-details.employee_modal',\n                                'target' => 'openModal',\n                            ],\n                            [\n                                'provider' => 'employee_manage_form.areas.employee-details'\n                                    .'.employee-details.employee_modal.employee_form_loader',\n                                'target' => 'render',\n                                'params' => [\n                                    'id' => $item['entity_id'],\n                                ],\n                            ]\n                        ],\n                        'href' => '#',\n                        'label' => __('Edit'),\n                        'hidden' => false,\n                    ];\n                }\n            }\n        }\n\n        return $dataSource;\n    }\n}<\/pre>\n\n\n\n
9:-<\/strong>  And in last add the component insert-form.js in folder \u2018app\/code\/Webkul\/UiForm\/view\/adminhtml\/web\/js\/form\/components\/insert-form.js\u2019<\/p>\n\n\n\n
define([\n    'Magento_Ui\/js\/form\/components\/insert-form'\n], function (Insert) {\n    'use strict';\n\n    return Insert.extend({\n        defaults: {\n            listens: {\n                responseData: 'onResponse'\n            },\n            modules: {\n                employeeListing: '${ $.employeeListingProvider }',\n                employeeModal: '${ $.employeeModalProvider }'\n            }\n        },\n\n        \/**\n         * Close modal, reload price rule listing and save\n         *\n         * @param {Object} responseData\n         *\/\n        onResponse: function (responseData) {\n            if (!responseData.error) {\n                this.employeeModal().closeModal();\n                this.employeeListing().reload({\n                    refresh: true\n                });\n            }\n        }\n    });\n});<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
For creating the Ui form through Ui component you can also follow our blog. Click here<\/a>.<\/p>\n\n\n
\n
\"Ui_Grid-1\"<\/figure>\n<\/div>\n\n\n
\"Ui_form\"<\/figure>\n\n\n\n
That\u2019s all about to create a Ui form with the modal pop-up in the admin panel using the Ui component.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
You can also view our wide range of ready-to-use Adobe commerce extensions.<\/p>\n\n\n\n
Furthermore, If for any more queries, please reach out to our team via support<\/a> ticket.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":365,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9121,302],"tags":[12967,12043],"class_list":["post-369368","post","type-post","status-publish","format-standard","hentry","category-magento","category-magento-2","category-magento2","tag-adobe-commerce","tag-ui-component-form"],"yoast_head":"\nOpen UI Form In Modal PopUp In Adobe Commerce - Webkul Blog<\/title>\n<meta name=\"description\" content=\"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Open UI Form In Modal PopUp In Adobe Commerce - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-29T12:27:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-23T13:08:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png\" \/>\n<meta name=\"author\" content=\"Saurav Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saurav Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\"},\"author\":{\"name\":\"Saurav Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e63462ecf811e98b26fee808c67a6426\"},\"headline\":\"Open UI Form In Modal PopUp In Adobe Commerce\",\"datePublished\":\"2023-03-29T12:27:58+00:00\",\"dateModified\":\"2024-05-23T13:08:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\"},\"wordCount\":459,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png\",\"keywords\":[\"Adobe Commerce\",\"UI component form\"],\"articleSection\":[\"magento\",\"Magento 2\",\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\",\"url\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\",\"name\":\"Open UI Form In Modal PopUp In Adobe Commerce - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png\",\"datePublished\":\"2023-03-29T12:27:58+00:00\",\"dateModified\":\"2024-05-23T13:08:02+00:00\",\"description\":\"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png\",\"width\":1189,\"height\":621,\"caption\":\"Ui_Grid-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Open UI Form In Modal PopUp In Adobe Commerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e63462ecf811e98b26fee808c67a6426\",\"name\":\"Saurav Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/decace4591552fae8d7c6b2415e15831d78f0d6edefd9d8a3c79ec51333cce97?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/decace4591552fae8d7c6b2415e15831d78f0d6edefd9d8a3c79ec51333cce97?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Saurav Kumar\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/sauravkumar-magento981\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Open UI Form In Modal PopUp In Adobe Commerce - Webkul Blog","description":"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/","og_locale":"en_US","og_type":"article","og_title":"Open UI Form In Modal PopUp In Adobe Commerce - Webkul Blog","og_description":"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce","og_url":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-29T12:27:58+00:00","article_modified_time":"2024-05-23T13:08:02+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png","type":"","width":"","height":""}],"author":"Saurav Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Saurav Kumar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/"},"author":{"name":"Saurav Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e63462ecf811e98b26fee808c67a6426"},"headline":"Open UI Form In Modal PopUp In Adobe Commerce","datePublished":"2023-03-29T12:27:58+00:00","dateModified":"2024-05-23T13:08:02+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/"},"wordCount":459,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png","keywords":["Adobe Commerce","UI component form"],"articleSection":["magento","Magento 2","Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/","url":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/","name":"Open UI Form In Modal PopUp In Adobe Commerce - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png","datePublished":"2023-03-29T12:27:58+00:00","dateModified":"2024-05-23T13:08:02+00:00","description":"We can also create forms using the Ui component and open that form in a modal popup through the Ui component in adobe commerce","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Ui_Grid-1.png","width":1189,"height":621,"caption":"Ui_Grid-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/open-ui-form-in-modal-popup-in-adobe-commerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Open UI Form In Modal PopUp In Adobe Commerce"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e63462ecf811e98b26fee808c67a6426","name":"Saurav Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/decace4591552fae8d7c6b2415e15831d78f0d6edefd9d8a3c79ec51333cce97?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/decace4591552fae8d7c6b2415e15831d78f0d6edefd9d8a3c79ec51333cce97?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Saurav Kumar"},"url":"https:\/\/webkul.com\/blog\/author\/sauravkumar-magento981\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/365"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=369368"}],"version-history":[{"count":51,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369368\/revisions"}],"predecessor-version":[{"id":374591,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369368\/revisions\/374591"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=369368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=369368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=369368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}