Magento – How to make a field dropdown with value in Dynamic Row magento 2 Admin

dynamic rowsmagento2ui-formuicomponent

I just created a dynamicRow using UIform (UiComponent). In this the value field I want to make it drop-down with predefined values. How to make it a drop-down, also I want to change another field's datatype:textarea.

**Dynamic Row Magento 2**

My form.xml:

<dynamicRows name="Sample" sortOrder="50" >
        <settings>
            <addButtonLabel translate="true">Add Value</addButtonLabel>
            <additionalClasses>
                <class name="admin__field-wide">false</class>
            </additionalClasses>
            <componentType>dynamicRows</componentType>
            <dndConfig>
                <param name="enabled" xsi:type="boolean">true</param>
            </dndConfig>
        </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="component" xsi:type="string">Magento_Ui/js/dynamic-rows/record</item>
                    <item name="componentType" xsi:type="string">container</item>
                    <item name="dataScope" xsi:type="string">data.row</item>
                </item>
            </argument>
            <field name="name" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">name</item>
                        <item name="fit" xsi:type="boolean">false</item>
                        <item name="label" xsi:type="string" translate="true">NAME</item>
                        <item name="dataType" xsi:type="string">text</item>
                    </item>
                </argument>
            </field>
            <field name="value" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="prefixName" xsi:type="string">value</item>
                        <item name="prefixElementName" xsi:type="string">option_</item>
                        <item name="dataScope" xsi:type="string">value</item>
                        <item name="fit" xsi:type="boolean">false</item>
                        <item name="label" xsi:type="string" translate="true">VALUE</item>
                        <item name="dataType" xsi:type="string">text</item>
                    </item>
                </argument>
            </field>
            <actionDelete name="action_delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">true</item>
                        <item name="prefixElementName" xsi:type="string">option_</item>
                        <item name="prefixName" xsi:type="string">Params.delete</item>
                        <item name="dataType" xsi:type="string">text</item>
                    </item>
                </argument>
                <settings>
                    <dataType>text</dataType>
                    <componentType>actionDelete</componentType>
                </settings>
            </actionDelete>
        </container>
    </dynamicRows>  

Thanks in advance.

Best Answer

Keeping your snippet and changing a few fields does work at my end.

 <dynamicRows name="Sample" sortOrder="50" >
                <settings>
                    <addButtonLabel translate="true">Add Value</addButtonLabel>
                    <additionalClasses>
                        <class name="admin__field-wide">false</class>
                    </additionalClasses>
                    <componentType>dynamicRows</componentType>
                    <dndConfig>
                        <param name="enabled" xsi:type="boolean">true</param>
                    </dndConfig>
                </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="component" xsi:type="string">Magento_Ui/js/dynamic-rows/record</item>
                            <item name="componentType" xsi:type="string">container</item>
                            <item name="dataScope" xsi:type="string">data.row</item>
                        </item>
                    </argument>
                    <field name="name" formElement="input">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="dataScope" xsi:type="string">name</item>
                                <item name="formElement" xsi:type="string">textarea</item>
                                <item name="fit" xsi:type="boolean">false</item>
                                <item name="label" xsi:type="string" translate="true">NAME</item>
                                <item name="dataType" xsi:type="string">text</item>
                            </item>
                        </argument>
                    </field>
                    <field name="value" formElement="select">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="prefixName" xsi:type="string">value</item>
                                <item name="prefixElementName" xsi:type="string">option_</item>
                                <item name="dataScope" xsi:type="string">value</item>
                                <item name="fit" xsi:type="boolean">false</item>
                                <item name="label" xsi:type="string" translate="true">VALUE</item>
                                <item name="dataType" xsi:type="string">text</item>
                            </item>
                        </argument>
                        <formElements>
                            <select>
                                <settings>
                                    <options class="Mbs\AdminScreen\Ui\Component\CartLog\Localisation\Options"/>
                                </settings>
                            </select>
                        </formElements>
                    </field>
                    <actionDelete name="action_delete">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">true</item>
                                <item name="prefixElementName" xsi:type="string">option_</item>
                                <item name="prefixName" xsi:type="string">Params.delete</item>
                                <item name="dataType" xsi:type="string">text</item>
                            </item>
                        </argument>
                        <settings>
                            <dataType>text</dataType>
                            <componentType>actionDelete</componentType>
                        </settings>
                    </actionDelete>
                </container>
            </dynamicRows>

And the options class:

class Options implements \Magento\Framework\Data\OptionSourceInterface
{
    public function toOptionArray()
    {
        return [
            ['value' => '', 'label' => __('None')],
            ['value' => 1, 'label' => __('one')],
            ['value' => 2, 'label' => __('two')]
        ];
    }
}
Related Topic