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

adminformmagento2uicomponent

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.

Best Answer

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.

Related Topic