1

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.

3 Answers 3

1

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')]
        ];
    }
}
1
  • is there any way we can limit the dynamic rows to maximum 10? @herve can you help me out? Jan 28, 2021 at 6:27
0

Add into your ui-form xml

<fieldset name="label_setting">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">false</item>
            <item name="label" xsi:type="string" translate="true">Dynamic Rows</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
    <container name="discount_row">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
                <item name="template" xsi:type="string">VendoreName_ModuleName/dynamic-rows/grid</item>
                <!-- change Template file -->
                <item name="componentType" xsi:type="string">dynamicRows</item>
                <item name="recordTemplate" xsi:type="string">record</item>
                <item name="deleteButtonLabel" xsi:type="string">Remove</item>
                <item name="addButtonLabel" xsi:type="string">Add New</item>
                <item name="deleteProperty" xsi:type="boolean">false</item>
                <!-- <item name="dndConfig" xsi:type="array">
<item name="enabled" xsi:type="boolean">false</item>
</item> -->
            </item>
        </argument>
        <container name="record">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
                    <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="field_name1">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">VendoreName\ModuleName\Model\DiscountNumbers</item>
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Field #1</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="source" xsi:type="string">field_name1</item>
                        <item name="dataScope" xsi:type="string">field_name1</item>
                        <item name="sortOrder" xsi:type="string">100</item>
                    </item>
                </argument>
            </field>
            <field name="field_name2">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="disabled" xsi:type="boolean">true</item>
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Field #2</item>
                        <item name="formElement" xsi:type="string">textarea</item>
                        <item name="source" xsi:type="string">field_name2</item>
                        <item name="dataScope" xsi:type="string">field_name2</item>
                    </item>
                </argument>
            </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">130</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>
    </container>
</fieldset>

Add drop down option VendoreName\ModuleName\Model DiscountNumbers.php

<?php

namespace VendoreName\ModuleName\Model;

use Magento\Framework\Data\OptionSourceInterface;

class DiscountNumbers implements OptionSourceInterface
{
    public function getOptionArray()
    {
        $options = [];
        $options['0'] = __('1% - 10%');
        $options['1'] = __('11% - 20%');
        $options['2'] = __('21% - 30%');
        $options['3'] = __('31% - 40%');
        $options['4'] = __('41% - 50%');
        $options['5'] = __('51% - 60%');
        $options['6'] = __('61% - 70%');
        $options['7'] = __('71% - 80%');
        $options['8'] = __('81% - 90%');
        $options['9'] = __('91% - 100%');
        return $options;
    }



    public function getAllOptions()
    {
        $res = $this->getOptions();
        array_unshift($res, ['value' => '', 'label' => '']);
        return $res; 
    } 

    public function getOptions() 
    { 
        $res = []; 
        foreach ($this->getOptionArray() as $index => $value) 
        { 
            $res[] = ['value' => $index, 'label' => $value]; 
        } 
        return $res; 
    }
    public function toOptionArray() 
    { 
        return $this->getOptions(); 
    } 
 }

add this template file VendoreName/ModuleName/view/adminhtml/web/template/dynamic-rows grid.html

<div class="admin__field-complex" if="$data.addButton">
    <div class="admin__field-complex-title">
        <span class="label" translate="'Add Your Title'"></span>
    </div>

    <div class="admin__field-complex-elements">
        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault" />
        <button attr="{disabled: disabled}" class="action-secondary" type="button" click="processingAddChild.bind($data, false, false, false)">
            <span translate="addButtonLabel" />
        </button>
    </div>

</div>

<div class="admin__field admin__field-wide" visible="visible" disabled="disabled" css="$data.setClasses($data)" attr="'data-index': index">
    <label if="$data.label" class="admin__field-label" attr="for: $data.uid">
        <span translate="$data.label" />
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <div class="admin__control-table-pagination" visible="!!element.getRecordCount()">
            <div class="admin__data-grid-pager">
                <button class="action-previous" type="button" data-bind="attr: {title: $t('Previous Page')}, click: previousPage, disable: isFirst()"></button>
                <input class="admin__control-text" type="number" data-bind="attr: {id: ++ko.uid}, value: currentPage" />
                <label class="admin__control-support-text" data-bind="attr: {for: ko.uid}, text: 'of ' + pages()"></label>
                <button class="action-next" type="button" data-bind="attr: {title: $t('Next Page')}, click: nextPage, disable: isLast()"></button>
            </div>
        </div>
        <div class="admin__control-table-wrapper">
            <table class="admin__dynamic-rows data-grid" data-role="grid">
                <thead if="element.columnsHeader">
                    <tr>
                        <th if="$data.dndConfig.enabled" class="data-grid-draggable-row-cell" />

                        <th repeat="foreach: labels, item: '$label'" class="data-grid-th" visible="$label().visible" disable="$label().disabled" css="setClasses($label())">
                            <span translate="$label().label" />
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr repeat="foreach: elems, item: '$record'" class="data-row" css="'_odd-row': $index % 2">
                        <td if="dndConfig.enabled" class="data-grid-draggable-row-cell" template="name: dndConfig.template, data: dnd" />

                        <!-- ko foreach: { data: $record().elems(), as: 'elem'} -->
                        <td if="elem.template" visible="elem.visible() && elem.formElement !== 'hidden'" disable="elem.disabled" css="$parent.setClasses(elem)" template="elem.template" attr="'data-index': index" />
                        <!-- /ko -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

I Hope This Helps You.

0

Solution :- 1

<field name="details_page_specification_template">
                        <argument name="data" xsi:type="array">
                            <item name="options" xsi:type="array">                       
                                <item name="0" xsi:type="array">
                                    <item name="label" xsi:type="string">Old</item>
                                    <item name="value" xsi:type="string">0</item>
                                </item>
                                <item name="1" xsi:type="array">
                                    <item name="label" xsi:type="string">New</item>
                                    <item name="value" xsi:type="string">1</item>
                                </item>
                            </item>
                            <item name="config" xsi:type="array">
                                <item name="dataType" xsi:type="string">text</item>
                                <item name="label" xsi:type="string" translate="true">Specification Template</item>
                                <item name="formElement" xsi:type="string">select</item>
                                <item name="dataScope" xsi:type="string">details_page_specification_template</item>
                                <item name="default" xsi:type="string">0</item>
                                
                            </item>
                        </argument>
                    </field>

Solution :- 2

<field name="restrict_from_guest">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">VendoreName\ModuleName\Model\DiscountNumbers</item>
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Restrict from Guests (Users who are not logged in)</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="dataScope" xsi:type="string">restrict_from_guest</item>
                        
                        <item name="default" xsi:type="string">0</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                </argument>
            </field>

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.