PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

DynamicRowsRecord component

The DynamicRowsRecord component is a container of record fields. The DynamicRowsRecord should be used as a child of the DynamicRows component.

Configuration options

Option Description Type Default
disabled The initial state of the component. When set to true, users cannot take action on the element. Boolean true
headerLabel The label of the record. It is used as a record label when the label option is not initialized. String ''
label The label of the record. String ''
visible Initial component’s visibility. When set to false, the "display: none" CSS style is added to the component’s DOM block. Boolean true

Sources files

Extends UiCollection:

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<form>
...
    <dynamicRows name="dynamic_rows">
        <settings>
            ...
        </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="label" xsi:type="string" translate="true">Record Example</item>
                    <item name="disabled" xsi:type="boolean">false</item>
                    <item name="visible" 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>
            <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                    <additionalClasses>
                        <class name="some-class">true</class>
                    </additionalClasses>
                    <dataType>text</dataType>
                    <label>Actions</label>
                    <componentType>actionDelete</componentType>
                </settings>
            </actionDelete>
        </container>
    </dynamicRows>
...
</form>

Result

DynamicRows Component with Record Component example