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
Option | Description | Type | Default |
addButton | button is use to add new row | Boolean | – |
addButtonLabel | Use for adding a label to button | string | Add |
pageSize | The number of record to be displayed on one page | Number | 20 |
additionalClasses | Sets custom classes to the component’s DOM block. | object | {} |
defaultRecord | The default (first) row when the component is initialized without data. | Boolean | false |
deleteProperty | The property added to a record data object when the record is deleted. Applied if the ‘deleteValue ‘ option is enabled. | String | ‘delete’ |
dndConfig | used 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). | Boolean | false |
columnsHeader | Used for hides and shows columns header. | Boolean | true |
columnsHeaderClasses | add custom classes for header(if header is enabled) | String | ‘ ‘ |
component | The path to the component’s JS constructor in terms of RequireJS. | String | Magento_Ui/js/dynamic-rows/dynamic-rows |
currentPage | Displayed current page number | Number | 1 |
deleteValue | Adds the deleteProperty property in the data object for the deleted record. | Boolean | false |
disabled | Initial component’s state. When set to ‘true ‘, users cannot take action on the element. | Boolean | fase |
fallbackResetTpl | The path to the fallback reset (restore to default button) .html template. | String | ui/form/element/helper/fallback-reset-link |
identificationProperty | The identification property added to the record data object. | String | record_id |
pageSize | Number of record one page | Number | 20 |
recordTemplate | The path to the .html template of a records. The list of templates is declared in the templates property. | String | record |
Template | The path to the component’s .html template. | String | ui/dynamic-rows/templates/default |
visible | Initial component’s visibility. When set to false , the display: none CSS style is added to the component’s DOM block. | Boolean | true |
Here is xml file path:
Namespace/ModuleName/view/adminhtml/ui_component/form.xml
Extends UiCollection
:
app/code/Magento/Ui/view/base/web/js/dynamic-rows/dynamic-rows.js
app/code/Magento/Ui/view/base/web/templates/dynamic-rows/templates/default.html
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>