Magento 2: How to Use Dynamic Row with UI Components

Hello Magento Friends,

Magento 2 UI Components offer a robust method for building dynamic and interactive forms within the admin panel. One handy UI component is Dynamic Row, which allows for the dynamic addition of multiple rows of input fields. This is especially useful when handling forms that need multiple entries of similar information, such as adding multiple contact numbers, specifications, or custom attributes.

In this tutorial, we will walk through the use of the Dynamic Row UI Component in Magento 2 step by step.

Steps to Use Dynamic Row with UI Components in Magento 2:

Step 1: First, you need to create a grid using the UI component. To do so, follow the below reference:

https://magecomp.com/blog/create-ui-component-grid-and-form-magento-2/

Step 2: We need to add the code below at the ui_component file in the path below

app\code\Vendor\Extension\view\adminhtml\ui_component\uiexample_form.xml

<fieldset name="win_condition_set">
	<argument name="data" xsi:type="array">
	   <item name="config" xsi:type="array">
	       <item name="label" xsi:type="string" translate="true">Dynamic Label</item>
	   </item>
	</argument>   
	<container name="dynamic_rows_container">
	   <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">ui/dynamic-rows/templates/default</item>
		   <item name="componentType" xsi:type="string">dynamicRows</item>
		   <item name="recordTemplate" xsi:type="string">record</item>
		   <item name="addButtonLabel" xsi:type="string">Add Dynamic Row</item>
		   <item name="deleteProperty" xsi:type="boolean">false</item>
	       </item>
	   </argument>
	   <container name="record">
	       <argument name="data" xsi:type="array">
		   <item name="config" xsi:type="array">
		       <item name="label" xsi:type="string" translate="true">Dynamic Row</item>
		       <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="showFallbackReset" xsi:type="boolean">false</item>
		   </item>
	       </argument>
	       <field name="row_id">
		   <argument name="data" xsi:type="array">
		       <item name="config" xsi:type="array">
		           <item name="label" xsi:type="string" translate="true">ID</item>
		           <item name="visible" xsi:type="boolean">false</item>
		           <item name="dataType" xsi:type="string">text</item>
		           <item name="formElement" xsi:type="string">input</item>
		           <item name="dataScope" xsi:type="string">row_id</item>
		       </item>
		   </argument>
	       </field>
	       <field name="first_col">
		   <argument name="data" xsi:type="array">
		       <item name="config" xsi:type="array">
		           <item name="dataType" xsi:type="string">text</item>
		           <item name="label" xsi:type="string" translate="true">First Column</item>
		           <item name="formElement" xsi:type="string">input</item>
		           <item name="dataScope" xsi:type="string">first_col</item>
		           <item name="showFallbackReset" xsi:type="boolean">false</item>
		           <item name="validation" xsi:type="array">
		               <item name="required-entry" xsi:type="boolean">true</item>
		           </item>
		           <item name="sortOrder" xsi:type="string">10</item>
		       </item>
		   </argument>
	       </field>
	       <field name="sec_col">
		   <argument name="data" xsi:type="array">
		       <item name="config" xsi:type="array">
		           <item name="dataType" xsi:type="string">text</item>
		           <item name="label" xsi:type="string" translate="true">Sec Column</item>
		           <item name="formElement" xsi:type="string">input</item>
		           <item name="dataScope" xsi:type="string">sec_col</item>
		           <item name="showFallbackReset" xsi:type="boolean">false</item>
		           <item name="default" xsi:type="string">100</item>
		           <item name="sortOrder" xsi:type="string">30</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="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>

Output:

Conclusion:

This way you can use Dynamic Row with UI Components in Magento 2. If you have any difficulty in performing the above steps, let me know through the comment section.

Stay updated with us for more such Magento 2 tutorials.

Happy Reading!