5

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.

2

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.

  • You are welcome! :) – Chirag Patel Oct 29 '18 at 8:57
  • @ChiragPatel How would you save the data? – Anshu Mishra Oct 29 '18 at 9:34
  • @ChiragPatel can you suggest an approach to use a plugin instead of preference? – Radu Apr 10 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.