I have created a dynamic form using Dynamic Rows in UI component form as shown in following screenshot:
Following is my code samples for your reference:
Namespace\ModuleName\view\adminhtml\ui_component\form.xml
<fieldset name="fee_options_container" component="Magento_Catalog/js/components/visible-on-option/fieldset"
sortOrder="15">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="valuesForOptions" xsi:type="array">
<item name="select" xsi:type="string">select</item>
</item>
</item>
</argument>
<settings>
<collapsible>true</collapsible>
<label translate="true">Manage Options</label>
</settings>
<dynamicRows name="fee_options">
<settings>
<addButtonLabel translate="true">Add Option</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="is_default" component="Magento_Catalog/js/form/element/checkbox" sortOrder="0"
formElement="checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="prefixElementName" xsi:type="string">option_</item>
<item name="inputCheckBoxName" xsi:type="string">default</item>
<item name="columnsHeaderClasses" xsi:type="string">control-table-options-th</item>
<item name="modules" xsi:type="array">
<item name="rows" xsi:type="string">ns = ${ $.ns }, index = fee_options</item>
</item>
</item>
</argument>
<settings>
<additionalClasses>
<class name="control-table-options-cell">true</class>
</additionalClasses>
<dataType>boolean</dataType>
<label translate="true">Is Default</label>
</settings>
<formElements>
<checkbox>
<settings>
<prefer>radio</prefer>
</settings>
</checkbox>
</formElements>
</field>
<field name="fee_price" component="Magento_Catalog/js/form/element/input"
template="Magento_Catalog/form/element/input" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="prefixName" xsi:type="string">fee_price.value</item>
<item name="prefixElementName" xsi:type="string">option_</item>
<item name="suffixName" xsi:type="string">0</item>
<item name="sortOrder" xsi:type="number">20</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="validate-digits" xsi:type="boolean">true</item>
</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate="true">Price</label>
</settings>
</field>
<field name="fee_type" formElement="select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="prefixName" xsi:type="string">fee_type.value</item>
<item name="prefixElementName" xsi:type="string">option_</item>
<item name="sortOrder" xsi:type="number">30</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate="true">Apply As</label>
<dataScope>fee_type</dataScope>
</settings>
<formElements>
<select>
<settings>
<options class="Magedelight\AdditionalFee\Model\Rule\Action\ActionProvider"/>
</settings>
</select>
</formElements>
</field>
<field name="store_0" component="Magento_Catalog/js/form/element/input"
template="Magento_Catalog/form/element/input" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="prefixElementName" xsi:type="string">option_</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate="true">Admin</label>
</settings>
</field>
<field name="position" component="Magento_Catalog/js/form/element/input" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="prefixName" xsi:type="string">position.order</item>
<item name="prefixElementName" xsi:type="string">option_</item>
</item>
</argument>
<settings>
<visible>false</visible>
</settings>
</field>
<actionDelete name="action_delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="fit" xsi:type="boolean">true</item>
<item name="prefixElementName" xsi:type="string">option_</item>
<item name="prefixName" xsi:type="string">fee.delete</item>
<item name="sortOrder" xsi:type="number">80</item>
</item>
</argument>
<settings>
<elementTmpl>Magento_Catalog/form/element/action-delete</elementTmpl>
<dataType>text</dataType>
<componentType>actionDelete</componentType>
</settings>
</actionDelete>
</container>
</dynamicRows>
</fieldset>
Namespace\Modulename\Controller\Adminhtml\Index\Save.php
public function execute() {
$dynamicRowData = $this->getRequest()->getParams();
}
Response of $dynamicRowData:
Array
(
[fee_id] => 4
[fee_name] => test
[display_type] => checkbox
[fee_options] => Array
(
[0] => Array
(
[store_1] => test 1
[store_2] => test 1
[fee_type] => F
[record_id] => 0
[fee_price] => 10
[store_0] => test 1
[position] => 1
[initialize] => true
[is_default] => 1
)
[1] => Array
(
[record_id] => 1
[store_1] => test 2
[store_2] => test 2
[fee_price] => 20
[fee_type] => F
[store_0] => test 2
[position] => 2
[initialize] => true
[is_default] => 0
)
)
[default] => Array
(
[0] => option_0
)
[fee_price] => Array
(
[value] => Array
(
[option_0] => Array
(
[0] => 10
)
[option_1] => Array
(
[0] => 20
)
)
)
[option_0] => test 1
[option_1] => test 2
[position] => Array
(
[order] => Array
(
[option_0] => 1
[option_1] => 2
)
)
[form_key] => 4Nj0oUjsJRfKgtWo
I'm saving is_default value like follows:
if (isset($data['is_default'])) {
foreach ($dynamicRowData as $recId => $record) {
if ($recId == $data['is_default']) {
$dynamicRowData[$recId]['is_default'] = 1;
}
else {
$dynamicRowData[$recId]['is_default'] = 0;
}
}
}
On edit page if I print Dataprovider's data, I'm getting following array for fee_options:
[fee_options] => Array
(
[0] => Array
(
[store_1] => test 1
[store_2] => test 1
[fee_type] => F
[record_id] => 0
[fee_price] => 10
[store_0] => test 1
[position] => 1
[initialize] => true
[is_default] => 1
)
[1] => Array
(
[record_id] => 1
[store_1] => test 2
[store_2] => test 2
[fee_price] => 20
[fee_type] => F
[store_0] => test 2
[position] => 2
[initialize] => true
[is_default] => 0
)
)
I can't save "is_default" field value, how can I make it selected at the time of Edit form. Can anyone please let me know if I'm missing anything? Thanks in anticipation.
