Magento 2 Add Dynamic Row in admin form using Block

Question

i have created one form in backend using block now i want to add dynamic row field in my custom form using block. how can i achieve that.

Thank you in advance.

Answer 1

Please add the following fieldset to your UI form. After that, you will be able to display dynamic rows.

<fieldset name="sub_domain_list">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Sub Domain Data</item>
                <item name="sortOrder" xsi:type="number">100</item>
            </item>
        </argument>
        <container name="dynamic_row">
            <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="deleteButtonLabel" xsi:type="string">Remove</item>
                    <item name="addButtonLabel" xsi:type="string">Add New </item>
                    <item name="deleteProperty" xsi:type="boolean">false</item>
                    <item name="dndConfig" xsi:type="array">
                        <item name="enabled" xsi:type="boolean">false</item>
                    </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">Record label goes here</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="sub_id">
                   <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">ID</item>
                           <item name="formElement" xsi:type="string">input</item>
                           <item name="source" xsi:type="string">sub_id</item>
                           <item name="dataScope" xsi:type="string">sub_id</item>
                           <item name="sortOrder" xsi:type="string">20</item>
                           <item name="disabled" xsi:type="boolean">true</item>
                           <item name="visible" xsi:type="boolean">false</item>
                       </item>
                   </argument>
                </field>
                <field name="license_key">
                   <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">Key</item>
                           <item name="formElement" xsi:type="string">input</item>
                           <item name="source" xsi:type="string">license_key</item>
                           <item name="dataScope" xsi:type="string">license_key</item>
                           <item name="sortOrder" xsi:type="string">30</item>
                           <item name="disabled" xsi:type="boolean">true</item>
                       </item>
                   </argument>
                </field>
                <field name="domain_name">
                   <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">Domain name</item>
                           <item name="formElement" xsi:type="string">input</item>
                           <item name="source" xsi:type="string">domain_name</item>
                           <item name="dataScope" xsi:type="string">domain_name</item>
                           <item name="sortOrder" xsi:type="string">70</item>
                           <item name="validation" xsi:type="array">
                               <item name="required-entry" xsi:type="boolean">true</item>
                           </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="sortOrder" xsi:type="string">10</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>