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)
    $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">
                <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>

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


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 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 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 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>
<!-- 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 name="imports" xsi:type="array">
                <item name="state" xsi:type="string">!index=create_product:responseStatus</item>
    <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 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>
  • 1
    Can you explain what is different about your code and why it works please? Simply pasting code doesn't really help anyone. – Ben Crook Sep 13 '17 at 8:17
  • Ui Component provide Modal tag, So instead of using your custom js you can use ui component modal – Ronak Chauhan Sep 13 '17 at 8:49
  • 1
    Can you please explain how to implement this code? – Keith Sep 13 '17 at 8:50
  • If you are asking about your code then I can not tell its working or not without test full code. But as you posted question I can assume that it's not working or have some error in your code, So I just provide you alternate solution, So its your choice to use it or not, Thanks. @BenCrook – Ronak Chauhan Sep 13 '17 at 8:52
  • You need to override product ui form, and past this code into that file @Keith – Ronak Chauhan Sep 13 '17 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.