Dynamically add form fields using Ui component on click of Add More button in custom admin module

Question

I have created a module which allows to add items dynamically from admin panel configuration. I have created form using ui component and want to add 3 fields dynamically on click of "Add More" button. I have no idea how to add dynamic fields using ui component.

Answer 1

Configure the container with XML

Just create a NameSpace/ModuleName/view/adminhtml/ui_component/product_form.xml file with this content:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> 
<fieldset name="my_fieldset" class="My\Module\Ui\Component\Form\Fieldset">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">More Product Links</item>
 <item name="sortOrder" xsi:type="number">1000</item>
 </item>
 </argument>
</fieldset>

Dynamically create fields with PHP

This is where we will write our custom logic to inject fields into this fieldset.

So here is the NameSpace\ModuleName\Ui\Component\Form\Fieldset PHP class which.

<?php 
 namespace My\Module\Ui\Component\Form;
 use Magento\Framework\View\Element\UiComponent\ContextInterface; 
 use Magento\Framework\View\Element\UiComponentInterface; 
 use Magento\Ui\Component\Form\FieldFactory; 
 use Magento\Ui\Component\Form\Fieldset as BaseFieldset;
 class Fieldset extends BaseFieldset 
 {
/**
 * @var FieldFactory
 */
private $fieldFactory;
public function __construct(
 ContextInterface $context,
 array $components = [],
 array $data = [],
 FieldFactory $fieldFactory)
{
 parent::__construct($context, $components, $data);
 $this->fieldFactory = $fieldFactory;
}
/**
 * Get components
 *
 * @return UiComponentInterface[]
 */
public function getChildComponents()
{
 $fields = [
 [
 'label' => __('Field Label From Code'),
 'value' => __('Field Value From Code'),
 'formElement' => 'input',
 ],
 [
 'label' => __('Another Field Label From Code'),
 'value' => __('Another Field Value From Code'),
 'formElement' => 'input',
 ],
 [
 'label' => __('Yet Another Field Label From Code'),
 'value' => __('Yet Another Field Value From Code'),
 'formElement' => 'input',
 ]
 ];
 foreach ($fields as $k => $fieldConfig) {
 $fieldInstance = $this->fieldFactory->create();
 $name = 'my_dynamic_field_' . $k;
 $fieldInstance->setData(
 [
 'config' => $fieldConfig,
 'name' => $name
 ]
 );
 $fieldInstance->prepare();
 $this->addComponent($name, $fieldInstance);
 }
 return parent::getChildComponents();
}
}

NOTE : In above logic i added simple field. so you need to add logic for add more field using Jquery or Javascript or any other logic. i have give a siple logic how to add dynamic UI component field.

• Chirag Patel: You are welcome! :)
• Anshu Mishra: @ChiragPatel How would you save the data?
• Radu: @ChiragPatel can you suggest an approach to use a plugin instead of preference?

Answer 2

Another way to get data Dynamically using UI component.

If you want get default value from another module using UI component.

Add this field in your {Vendorname}\{Modulename}/view/adminhtml/ui_component/custom_form.xml file

<field name="your_field_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="disabled" xsi:type="boolean">true</item>
 <item name="class" xsi:type="string">{Vendorname}\{Modulename}\Ui\Component\Form\Element\Input</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="label" translate="true" xsi:type="string">Name label</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">[source_here]</item>
 <item name="required" xsi:type="boolean">true</item>
 <item name="dataScope" xsi:type="string">your_field_id</item>
 </item>
 </argument>
</field>

Create file In {Vendorname}\{Modulename}\Ui\Component\Form\Element\DataProvider.php

Add logic in DataProvider.php

<?php
namespace {Vendorname}\{Modulename}\Ui\Component\Form\Element;
class DataProvider extends \Magento\Ui\Component\Form\Element\Input
{
 /**
 * Prepare component configuration
 *
 * @return void
 */
 public function prepare()
 {
 parent::prepare();
 $dynamicValue = {Get Dynamic Custom value};
 $config = $this->getData('config');
 if(isset($config['dataScope']) && $config['dataScope']=='your_field_id'){
 $config['default']= $dynamicValue;
 $this->setData('config', (array)$config);
 }
 }
}

I hope It's work for you

• Kirti Nariya: Where is added "Add More" button ?
• Kirti Nariya: I have need in cart price rule. magento.stackexchange.com/questions/365116/…