0

After A LOT of struggling with Dynamic Rows, I finally have something.

1) I created DataProvider Modifier to add my data into form initial data.

2) I have the "legendary code" in my XML file that finally works:

<dynamicRows name="slides">
            <settings>
                <identificationProperty>slide_id</identificationProperty>
                <addButtonLabel translate="true">Add Swatch</addButtonLabel>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                </additionalClasses>
                <componentType>dynamicRows</componentType>
                <columnsHeader>false</columnsHeader>
                <addButton>false</addButton>
            </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">position</item>
                    </item>
                </argument>
                <field name="slide_id">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="label" xsi:type="string" translate="true">Slider ID</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="source" xsi:type="string">slide_id</item>
                            <item name="dataScope" xsi:type="string">slide_id</item>
                        </item>
                    </argument>
                </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">slide.position</item>
                            <item name="prefixElementName" xsi:type="string">slide_</item>
                        </item>
                    </argument>
                    <settings>
                        <additionalClasses>
                            <class name="_hidden">true</class>
                        </additionalClasses>
                        <dataType>text</dataType>
                        <visible>false</visible>
                        <dataScope>position</dataScope>
                    </settings>
                </field>
            </container>
        </dynamicRows>

But there's a problem:

Uncaught TypeError: this.parentName.split(...).last is not a function in (...)/adminhtml/Magento/backend/en_US/Magento_Catalog/js/form/element/input.js:40

function last() seems to be from underscore and I can see it defined in top of the file:

    define([
        'underscore',
        'Magento_Ui/js/form/element/abstract'
    ], function (_, Acstract) {
        'use strict';
(...)

That part of code:

this.parentName.split('.')

Is returning nice array.

I know that I'm super-close to achieve my goal: enter image description here

0

If you don't know how to eliminate the problem, try to eliminate the code.

Change:

                <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">slide.position</item>
                            <item name="prefixElementName" xsi:type="string">slide_</item>
                        </item>
                    </argument>
                    <settings>
                        <additionalClasses>
                            <class name="_hidden">true</class>
                        </additionalClasses>
                        <dataType>text</dataType>
                        <visible>false</visible>
                        <dataScope>position</dataScope>
                    </settings>
                </field>

To:

        <field name="position">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="prefixName" xsi:type="string">slide.position</item>
                    <item name="prefixElementName" xsi:type="string">slide_</item>
                    <item name="formElement" xsi:type="string">input</item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="_hidden">true</class>
                </additionalClasses>
                <dataType>text</dataType>
                <visible>false</visible>
                <dataScope>position</dataScope>
            </settings>
        </field>

As you can see, I removed the component attribute, so it no longer use it. I moved formElement, but just for clarity.

I hope it will help someone to do it faster then me - there is defintelly lack of documentation for UI Components in M2 and there is no working example on stackoverflow or stackexchange how to implement dynamicRows too.

| improve this answer | |

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.