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
