5

I am trying to add a dynamic row fields in admin product edit page. I tried the below code in my product_form.xml file.

<?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">
    <dataSource name="product_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="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider"
                      name="product_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    <fieldset sortOrder="50" name="assign_applicants">
        <settings>
            <label>Fieldset label</label>
            <collapsible>true</collapsible>
        </settings>

        <dynamicRows name="dynamic_row">
            <settings>
                <visible>true</visible>
                <addButtonLabel translate="true">Add</addButtonLabel>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                </additionalClasses>
                <componentType>dynamicRows</componentType>
                <elementTmpl>ui/dynamic-rows/templates/grid</elementTmpl>
            </settings>
            <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="isTemplate" xsi:type="boolean">true</item>
                        <item name="is_collection" xsi:type="boolean">true</item>
                        <item name="componentType" xsi:type="string">container</item>
                        <item name="'positionProvider'" xsi:type="string">container_option</item>
                    </item>
                </argument>

                <field name="title" sortOrder="20" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="source" xsi:type="string">block</item>
                        </item>
                    </argument>
                    <settings>
                        <validation>
                            <rule name="required-entry" xsi:type="boolean">true</rule>
                        </validation>
                        <dataType>text</dataType>
                        <label translate="true">Block Title</label>
                        <dataScope>title</dataScope>
                    </settings>
                </field>
                <actionDelete>
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="componentType" xsi:type="string">actionDelete</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="fit" xsi:type="boolean">false</item>
                            <item name="label" xsi:type="string">Actions</item>
                            <item name="sortOrder" xsi:type="string">60</item>
                            <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete
                            </item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </dynamicRows>
    </fieldset>
</form>

The dynamic row rendered in admin product edit page properly, but while adding one more record the record is not updating in dynamic row. It means I can able to add only one record of data only. Also while click the action delete button it is throwing the below console error and the record has removed properly.

enter image description here

I found the same question in this link but still not a proper answer found while searching in google. Please suggest any proper solution to fix this issue.

Note: This issue only happening in admin product edit page, I tried the same code in cms_block_form.xml and the dynamic row is working properly in that form

1

1 Answer 1

8

I found the issue. The issue is from the linking property "links". The links property is missed while adding more than one record. So the datascope configuration is most important for the "links" property.

Here I missed datascope for fieldset configuration. After added the datascope, dynamic row is working without issues.

Corrected code:

    <?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">
    <dataSource name="product_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="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider"
                      name="product_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    <fieldset sortOrder="50" name="assign_applicants">
        <settings>
            <label>Fieldset label</label>
            <collapsible>true</collapsible>

            <!--Here this one what I missed-->
             <dataScope>data.product.assign_applicants</dataScope>
            <!--Here this one what I missed-->

        </settings>

        <dynamicRows name="dynamic_row">
            <settings>
                <visible>true</visible>
                <addButtonLabel translate="true">Add</addButtonLabel>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                </additionalClasses>
                <componentType>dynamicRows</componentType>
                <elementTmpl>ui/dynamic-rows/templates/grid</elementTmpl>
            </settings>
            <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="isTemplate" xsi:type="boolean">true</item>
                        <item name="is_collection" xsi:type="boolean">true</item>
                        <item name="componentType" xsi:type="string">container</item>
                        <item name="'positionProvider'" xsi:type="string">container_option</item>
                    </item>
                </argument>

                <field name="title" sortOrder="20" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="source" xsi:type="string">block</item>
                        </item>
                    </argument>
                    <settings>
                        <validation>
                            <rule name="required-entry" xsi:type="boolean">true</rule>
                        </validation>
                        <dataType>text</dataType>
                        <label translate="true">Block Title</label>
                        <dataScope>title</dataScope>
                    </settings>
                </field>
                <actionDelete>
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="componentType" xsi:type="string">actionDelete</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="fit" xsi:type="boolean">false</item>
                            <item name="label" xsi:type="string">Actions</item>
                            <item name="sortOrder" xsi:type="string">60</item>
                            <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete
                            </item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </dynamicRows>
    </fieldset>
</form>

The missed datascope is : <dataScope>data.product.assign_applicants</dataScope>

data.product => core product data scope
assign_applicants => custom fieldset name
3
  • 1
    Man you are a life saver!!! Thank you very much for this answer!!!
    – Ciprian
    Commented Jan 27, 2022 at 12:48
  • do you have any reference to help here for show the data in this product dynamic row? Commented Dec 15, 2022 at 17:17
  • @Siranjeevi K S How can add dynamic field in cart price rule action section based on change action apply. magento.stackexchange.com/questions/365116/… Commented Mar 7, 2023 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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