UI form dynamicrows can only add one row?

Question

I got a weird error and I can't seem to figure out how to solve it.

I create a dynamic row within a ui form. All this works as supposed. BUT, when i create a add a record i can only add one...
So the button works, no error but when i want to add another record it just doesn't add it. and there's no error whatsoever..

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">productaddons_options_form.options_form_data_source</item>
 <item name="deps" xsi:type="string">productaddons_options_form.options_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">Option Form</item>
 <item name="template" xsi:type="string">templates/form/collapsible</item>
 </argument>
 <dataSource name="options_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">FullStak\ProductAddons\Model\Options\DataProvider</argument>
 <argument name="name" xsi:type="string">options_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">productaddons_option_id</argument>
 <argument name="requestFieldName" xsi:type="string">id</argument>
 </argument>
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
 </item>
 </argument>
 </dataSource>
 <fieldset name="option">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Option bundle information</item>
 </item>
 </argument>
 <field name="productaddons_option_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <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="source" xsi:type="string">option</item>
 </item>
 </argument>
 </field>
 <field name="name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Name</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">option</item>
 </item>
 </argument>
 </field>
 <field name="comment">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Comment</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">option</item>
 </item>
 </argument>
 </field>
 </fieldset>
 <fieldset name="options_group">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Customizable options</item>
 <item name="collapsible" xsi:type="boolean">true</item>
 <item name="opened" xsi:type="boolean">true</item>
 </item>
 </argument>
 <dynamicRows name="optiongroup">
 <settings>
 <addButtonLabel translate="true">Add Option</addButtonLabel>
 <dndConfig>
 <param name="enabled" xsi:type="boolean">true</param>
 <param name="draggableElementClass" xsi:type="string">_dragged</param>
 <param name="tableClass" xsi:type="string">table.admin__dynamic-rows</param>
 </dndConfig>
 </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" 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</label>
 </settings>
 </field>
 </container>
 </dynamicRows>
 </fieldset>
</form>

Result: dynamicrow one rec

Answer 1

I found the answer and feel a bit stupid :) haha It was a combination of things...

<item name="layout" xsi:type="array">
 <item name="type" xsi:type="string">tabs</item>
</item>
<!--<item name="template" xsi:type="string">templates/form/collapsible</item>-->

I had to remove the template item and needed to add layout->type: tabs.

And i had to have a main fieldset, with fieldsets within to make it all work together... Hope i can help someone who also has this problem :)

Cheers!

• LucScu: great! could you post the full correct xml code?
• Bram Hammer: Sure! here it is: gist.github.com/breakerh/4d10b18a5efbf601132a62080cfecacd
• LucScu: great job, it could be very useful.
• Bram Hammer: Thanks hope i can save someone some time and a lot of headache haha :)