Skip to content

Adding dataSource to dynamicRows ui component in product_form

I need to add a Dynamic Rows ui component to the admin product_form.xml. I get the ui to work (the html is updated when adding and removing rows). But I cant configure the datasource/dataprovider for my dynamic rows. As I add a dataSource component inside the dynamicRows component I get errors. Is it even possible to add another datasource in the product_form component – even if it is a child component? Or do I have to modify the already existing datasource?

I get this error when adding the dataSource node:

Element 'argument': This element is not expected.
Line: 26

Element 'container': This element is not expected. Expected is ( dataSource ).
Line: 33

Verify the XML and try again.

Without the dataSource node the page loads fine. This is my product_form.xml

<?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">
        <dynamicRows name="component_name">
            <settings>
                <componentType>dynamicRows</componentType>
                <columnsHeader>false</columnsHeader>
                <addButton>true</addButton>
                <addButtonLabel translate="true">Add</addButtonLabel>
                <deleteProperty>false</deleteProperty>
                <dndConfig>
                    <param name="enabled" xsi:type="boolean">false</param>
                </dndConfig>
            </settings>
            <dataSource name="vendor_component_name_data_source">
                <dataProvider class="VendorModuleUiDataProviderComponentNameDataProvider" name="component_name_data_source">
                    <settings>
                        <requestFieldName>product_id</requestFieldName>
                        <primaryFieldName>entity_id</primaryFieldName>
                    </settings>
                </dataProvider>
                <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 name="provider" xsi:type="string">component_name.component_name_data_source</item>
                    </item>
                </argument>
            </dataSource>
            <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>
                </argument>
                <field name="from" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">false</item>
                        </item>
                    </argument>
                    <settings>
                        <validation>
                            <rule name="required-entry" xsi:type="boolean">true</rule>
                        </validation>
                        <dataType>text</dataType>
                        <label>From</label>
                        <dataScope>from</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="label" xsi:type="string">Delete</item>
                            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </dynamicRows>
</form>