Magento – How to render UI form in popup modal from modifier file- magento2

custom-optionsmagento2uicomponent

In the product form I want to add dependency button with customizable options values, for this I am adding below function by overriding the customoptions data-provider file :

protected function getIsdependFieldConfig($sortOrder)
{ //FIELD_DEPEND_NAME
    $modalTarget = 'product_form.product_form.' . static::GROUP_DEPENDS . '.' . $this->dataScopeName . '.modal';
    $content= __(
        ''
    );
    return [          
        /*'children' => [                    
                'modal' => $this->getGenericModal(
                    $this->scopePrefix . static::DATA_SCOPE_DEPENDS
                ),
        //static::DATA_SCOPE_DEPENDS => $this->getGrid($this->scopePrefix . static::DATA_SCOPE_DEPENDS),
        ] ,*/
        'arguments' => [
            'data' => [
                'config' => [
                            'formElement' => 'container',
                            'componentType' => 'container',
                            'component' => 'Magento_Ui/js/form/components/button',
                            'actions' => [
                                [
                                    'targetName' => $this->dataScopeName . '.dependancyModal',
                                    'actionName' => 'toggleModal',
                                ],
                                [
                                    'targetName' => $modalTarget . '.' . $this->dataScopeName . '.dependancyModal',
                                    'actionName' => 'render',
                                ],
                            ],
                            'title' => __('Dependancy'),
                            'sortOrder' => 60,

                        ],
            ],
        ],

    ];
}

Reference block in the layout file :

<referenceBlock name="product_form">
        <block name="customoptions.form.dependant.matrix" class="Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Variations\Config\Matrix" template="Vendor_Namespace::products/assign_products.phtml" as="custom_dependant">
            <arguments>
                <argument name="config" xsi:type="array">
                    <item name="collapsible" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true" />
                    <item name="sortOrder" xsi:type="string">1000</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                    <item name="provider" xsi:type="string">product_form.product_form_data_source</item>
                    <item name="form" xsi:type="string">product_form.product_form</item>
                    <item name="modal" xsi:type="string">dependancyModal</item>
                    <item name="nameStepWizard" xsi:type="string">variation-steps-wizard</item>
                    <item name="dataScope" xsi:type="string">customoptionsFormDependant</item>
                    <item name="urlWizard" xsi:type="string">customoptions/items/dependancy</item>
                </argument>
            </arguments>
        </block>
    </referenceBlock>

Popup is able to open on click of button but no data and UI component form has render.

Best Answer

Ui Component Form XML:

<container name="<button_name>">
    <argument name="data" xsi:type="array">
         <item name="config" xsi:type="array">
         <item name="title" xsi:type="string" translate="true">Open Modal</item>
         <item name="formElement" xsi:type="string">container</item>
         <item name="additionalClasses" xsi:type="string">admin__field-small</item>
         <!-- <item name="componentType" xsi:type="string">container</item> -->
         <item name="component" xsi:type="string">Magento_Ui/js/form/components/button</item>
         <item name="template" xsi:type="string">ui/form/components/button/container</item>
         <item name="actions" xsi:type="array">
              <item name="0" xsi:type="array">
              <item name="targetName" xsi:type="string">product_form.product_form.create_modal</item>
              <item name="actionName" xsi:type="string">toggleModal</item>
         </item>
         <item name="1" xsi:type="array">
              <item name="targetName" xsi:type="string">product_form.product_form.create_product_modal.create_product</item>
              <item name="actionName" xsi:type="string">render</item>
         </item>
         <item name="2" xsi:type="array">
              <item name="targetName" xsi:type="string">product_form.product_form.create_product_modal.create_product</item>
              <item name="actionName" xsi:type="string">resetForm</item>
              </item>
         </item>
         <item name="additionalForGroup" xsi:type="boolean">true</item>
            <item name="provider" xsi:type="boolean">false</item>
            <item name="source" xsi:type="string">post</item>
            <item name="displayArea" xsi:type="string">insideGroup</item>
         </item>
   </argument>
</container>
<!-- Modal -->
<modal name="create_product_modal">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="isTemplate" xsi:type="boolean">false</item>
            <item name="component" xsi:type="string">Magento_Ui/js/modal/modal-component</item>
            <item name="options" xsi:type="array">
                <item name="title" xsi:type="string">New Product</item>
                <item name="type" xsi:type="string">slide</item>
            </item>
            <item name="imports" xsi:type="array">
                <item name="state" xsi:type="string">!index=create_product:responseStatus</item>
            </item>
        </item>
    </argument>
    <container name="create_product">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true"></item>
                <item name="formElement" xsi:type="string">container</item>
                <item name="component" xsi:type="string">Magento_Ui/js/form/components/insert-form</item>
                <item name="dataScope" xsi:type="string"></item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="render_url" xsi:type="url" path="mui/index/render_handle">
                    <param name="handle">product_create</param>
                    <param name="buttons">1</param>
                </item>
                <item name="autoRender" xsi:type="boolean">false</item>
                <item name="ns" xsi:type="string">product_form</item>
                <item name="externalProvider" xsi:type="string">product_form.product_form_data_source</item>
                <item name="toolbarContainer" xsi:type="string">${ $.parentName }</item>
                <item name="formSubmitType" xsi:type="string">ajax</item>
            </item>
        </argument>
    </container>
</modal>
Related Topic