4

I've got a <dynamicRows> element. When I render the object, I'm able to create new rows, and all of the fields appear.

However, I have no idea how to:

  1. Populate the rows from the database
  2. Save the rows back into the database

I've been looking at vendor\magento\module-swatches\view\adminhtml\ui_component\product_attribute_add_form.xml as a reference, and the only element that looks remotely like "data" is:

<item name="valuesForOptions" xsi:type="array">
    <item name="swatch_text" xsi:type="string">swatch_text</item>
</item>

But I can't figure out how that works, and what the "swatch_text" parameter does.

I've also added a <dataProvider> tag, but I'm not sure where to add it. I've added my UI xml below:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> 
<button>
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="displayAsLink" xsi:type="boolean">true</item>
            <item name="title" xsi:type="string">Test</item>
            <item name="actions" xsi:type="array">
                <item name="0" xsi:type="array">
                    <item name="targetName" xsi:type="string">product_form.product_form.business_card_modal</item>
                    <item name="actionName" xsi:type="string">toggleModal</item>
                </item>
            </item>
        </item>
    </argument>
</button>
<modal name="business_card_modal">
    <settings>
        <options>
            <option name="buttons" xsi:type="array">
                <item name="0" xsi:type="array">
                    <item name="text" xsi:type="string">Done</item>
                    <item name="class" xsi:type="string">action-primary</item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.name }</item>
                            <item name="actionName" xsi:type="string">actionDone</item>
                        </item>
                    </item>
                </item>
            </option>
            <option name="title" xsi:type="string">Business Card?</option>
        </options>
        <onCancel>actionDone</onCancel>
        <dataScope>data.product</dataScope>
    </settings>
    <dataSource name="mm_bizcard_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>
        <settings>
            <validateUrl path="catalog/product_attribute/validate"/>
            <submitUrl path="catalog/product_attribute/save"/>
        </settings>
        <dataProvider class="MM\Bizcard\Model\Product\DataProvider" name="mm_bizcard_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>attribute_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="my_fieldset" class="MM\Bizcard\Ui\Component\Form\Fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="valuesForOptions" xsi:type="array">
                    <item name="swatch_text" xsi:type="string">swatch_text</item>
                </item>
                <item name="label" xsi:type="string" translate="true">Bizcard Thing 2</item>
                <item name="sortOrder" xsi:type="number">1000</item>
            </item>
        </argument>
        <dynamicRows name="bizcard">
            <settings>
                <addButtonLabel translate="true">Add Label</addButtonLabel>
                <componentType>dynamicRows</componentType>
            </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">attribute_options.position</item>
                    </item>
                </argument>
                <field name="testfield" component="Magento_Catalog/js/form/element/input" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="prefixName" xsi:type="string">option.order</item>
                            <item name="prefixElementName" xsi:type="string">option_</item>
                        </item>
                    </argument>
                    <settings>
                        <dataType>text</dataType>
                        <visible>true</visible>
                    </settings>
                </field>
                <field name="position" component="Magento_Catalog/js/form/element/input" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="prefixName" xsi:type="string">option.order</item>
                            <item name="prefixElementName" xsi:type="string">option_</item>
                        </item>
                    </argument>
                    <settings>
                        <additionalClasses>
                            <class name="_hidden">true</class>
                        </additionalClasses>
                        <dataType>text</dataType>
                        <visible>false</visible>
                        <dataScope>position</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">Actions</item>
                            <item name="sortOrder" xsi:type="string">100</item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </dynamicRows>
    </fieldset>
</modal>
</form>  

How do I populate <dynamicRows> with data on page load?

1 Answer 1

1

Your <form> element seems to be missing it's configuration. You should have something like this:

    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">some_form.your_data_source</item>
            <item name="deps" xsi:type="string">some_form.your_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Some Form</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">some_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            ...
        </item>
    </argument>

Where 'your_data_source' is the name supplied to the <dataSource>

The provider argument to the js_config is what makes the data source visible to the form.

Also, <dataSource> should be under <form>, not <modal>

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.