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.

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