November 19, 2020Lokesh S

Magento 2 DynamicRows component

DynamicRows components are a list of records where users can add new records, edit their records, change their display positions, and navigate through the collection. 

There are some configuration option which needed for dynamic row

OptionDescriptionTypeDefault
addButtonbutton is use to add new rowBoolean–
addButtonLabelUse for adding a label to buttonstringAdd
pageSizeThe number of record to be displayed on one pageNumber20
additionalClasses
Sets custom classes to the component’s DOM block.object{}
defaultRecord The default (first) row when the component is initialized without data.Booleanfalse
deletePropertyThe property added to a record data object when the record is deleted. Applied if the ‘deleteValue‘ option is enabled.String‘delete’
dndConfigused for Configuration of the drag and drop (DND) plugin for dynamicRows.object{name:
'${ $.name }_dnd', component: 'Magento_Ui/js/dynamic-rows/dnd', template: 'ui/dynamic-rows/cells/dnd', recordsProvider: '${ $.name }', enabled: true }
CollasibleHeader
Enables or disables the collapsible functionality for the header (if columns header is enabled).Booleanfalse
columnsHeaderUsed for hides and shows columns header.Booleantrue
columnsHeaderClassesadd custom classes for header(if header is enabled)String‘ ‘
componentThe path to the component’s JS constructor in terms of RequireJS.StringMagento_Ui/js/dynamic-rows/dynamic-rows
currentPageDisplayed current page numberNumber1
deleteValueAdds the deleteProperty property in the data object for the deleted record.Booleanfalse
disabledInitial component’s state. When set to ‘true‘, users cannot take action on the element.
Booleanfase
fallbackResetTplThe path to the fallback reset (restore to default button) .html template.Stringui/form/element/helper/fallback-reset-link
identificationPropertyThe identification property added to the record data object.Stringrecord_id
pageSizeNumber of record one pageNumber20
recordTemplateThe path to the .html template of a records. The list of templates is declared in the templates property.Stringrecord
TemplateThe path to the component’s .html template.Stringui/dynamic-rows/templates/default
visibleInitial component’s visibility. When set to false, the display: none CSS style is added to the component’s DOM block.Booleantrue

Here is xml file path:

Namespace/ModuleName/view/adminhtml/ui_component/form.xml

Extends UiCollection:

Here is code for DynamicRows component integrates with the Form Component:

<form>   
    <dynamicRows name="dynamic_rows">
        <settings>
            <addButtonLabel translate="true">Add Record</addButtonLabel>
            <additionalClasses>
                <class name="admin__field-wide">true</class>
            </additionalClasses>
            <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>
            </argument>
            <field name="field_1" 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>Field #1</label>
                </settings>
            </field>
            <field name="field_2" 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>Field #2</label>
                </settings>
            </field>
        </container>
    </dynamicRows>
</form>

Leave a Reply