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.
Magento – Dynamically add form fields using Ui component on click of Add More button in custom admin module
adminformmagento2uicomponent
Related Solutions
The product form is generated via ui-components.
The ui component name for product form is view/adminhtml/ui_component/product_form.xml
.
You need to create a file with the same name and path in your own module with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="buttons" xsi:type="array">
<item name="button-unique-identifier-here" xsi:type="string">[Namespace]\[Module]\Block\Adminhtml\Product\Edit\Button\CustomButton</item>
</item>
</argument>
</form>
Then create the class [Namespace]\[Module]\Block\Adminhtml\Product\Edit\Button\CustomButton
in the file [Namespace]/[Module]/Block/Adminhtml/Product/Edit/Button/CustomButton.php
<?php
namespace [Namespace]\[Module]\Block\Adminhtml\Product\Edit\Button;
use Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Generic;
class CustomButton extends Generic
{
public function getButtonData()
{
return [
'label' => __('Your button label here'),
'on_click' => "alert('it works')",
'sort_order' => 100
];
}
}
Your ui component file should be merged with the main file and your buttons should appear among the other buttons.
Override getMeta function in your dataprovider and set value like this.
my form.xml
<fieldset name="fieldset_name">
<field name="attribute_id">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Vendor\Module\Model\Source\Attributes</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Attribute</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/select-option</item>
<item name="dataScope" xsi:type="string">attribute_id</item>
<item name="componentType" xsi:type="string">select</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
</fieldset>
My DataProvide.
public function getMeta()
{
$meta = parent::getMeta();
$id = $this->request->getParam('id');
if(<<Your Condition>>){
$meta['fieldset_name']['children']['attribute_id']['arguments']['data']['config']['disabled'] = 1;
}
return $meta;
}
I have disable form field using this. It's work fine. you can try.
If you still any query let me know.
Best Answer
Configure the container with XML
Just create a
NameSpace/ModuleName/view/adminhtml/ui_component/product_form.xml
file with this content: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.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.