3

I want to add add new button template in admin form like this...

enter image description here

How to do that?

Thanks.

2
  • are you using blocks or UI components Mar 5, 2019 at 8:53
  • ui component....
    – Mahi M
    Mar 5, 2019 at 8:53

3 Answers 3

3

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 simple logic how to add dynamic UI component field.

2
  • Hey @Chirag it's working good but now i want to use another fileld set field value in dynamic field file. so how i can get that details Feb 9, 2021 at 7:35
  • Let me check if I found something. Feb 9, 2021 at 11:19
2

app/code/Vendor/Name/etc/adminhtml/system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="sd_general" translate="label" sortOrder="10">
            <label>Prince</label>
        </tab>
        <section id="sd_homepage" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top sd-general-admin-tab-general</class>
            <label>My generated form</label>
            <tab>sd_general</tab>
            <resource>Vendor_Name::home_page</resource>
            <group id="menus" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Breadcrumbs</label>
                <field id="menu_item" translate="label" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Create breadcrumb</label>
                    <frontend_model>Vendor\Name\Block\Adminhtml\Menu\Field\AdditionalBreadcrumb</frontend_model>
                    <backend_model>Vendor\Name\Block\Adminhtml\Menu\Config\Backend\AdditionalBreadcrumb</backend_model>
                </field>
            </group>
        </section>
    </system>
</config>

app/code/Vendor/Name/Block/Adminhtml/Menu/Field/AdditionalBreadcrumb.php

<?php

namespace Vendor\Name\Block\Adminhtml\Menu\Field;

use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;

class AdditionalBreadcrumb extends AbstractFieldArray
{
    protected $_typeblockOptions;
    protected $_cmsblockOptions;
    /**
     * {@inheritdoc}
     */
    protected function _prepareToRender()
    {
        $this->addColumn(
            'titre',
            [
                'label' => __('Label'),
                'size' => '200px',
                'class' => 'required-entry'
            ]
        );

        $this->addColumn(
            'lien',
            [
                'label' => __('Url'),
                'size' => '200px'
            ]
        );


        $this->_addAfter = false;
        $this->_addButtonLabel = __('Add Breadcrumb');
    }

    protected function _getGroupTypeRenderer()
    {
        if (!$this->_typeblockOptions) {
            $this->_typeblockOptions = $this->getLayout()->createBlock(
                \Vendor\Name\Block\Adminhtml\Menu\Config\Backend\TypeOptions::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
            $this->_typeblockOptions->setClass('type_group_select');
        }
        return $this->_typeblockOptions;
    }

    protected function _getGroupCmsBlocRenderer()
    {
        if (!$this->_cmsblockOptions) {
            $this->_cmsblockOptions = $this->getLayout()->createBlock(
                \Vendor\Name\Block\Adminhtml\Menu\Config\Backend\CmsBlockOptions::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
            $this->_cmsblockOptions->setClass('cmsbloc_group_select');
        }
        return $this->_cmsblockOptions;
    }

}

app/code/Vendor/Name/Block/Adminhtml/Menu/Config/Backend/AdditionalBreadcrumb.php

<?php

namespace Vendor\Name\Block\Adminhtml\Menu\Config\Backend;

use Magento\Framework\App\Cache\TypeListInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\App\Config\Value as ConfigValue;
use Magento\Framework\Data\Collection\AbstractDb;
use Magento\Framework\Model\Context;
use Magento\Framework\Model\ResourceModel\AbstractResource;
use Magento\Framework\Registry;
use Magento\Framework\Serialize\SerializerInterface;

class AdditionalBreadcrumb extends ConfigValue
{

    protected $serializer;

    public function __construct(
        SerializerInterface $serializer,
        Context $context,
        Registry $registry,
        ScopeConfigInterface $config,
        TypeListInterface $cacheTypeList,
        AbstractResource $resource = null,
        AbstractDb $resourceCollection = null,
        array $data = []
    ) {
        $this->serializer = $serializer;
        parent::__construct($context, $registry, $config, $cacheTypeList, $resource, $resourceCollection, $data);
    }

    /**
     * Prepare data before save
     *
     * @return void
     */
    public function beforeSave()
    {
        /** @var array $value */
        $value = $this->getValue();
        unset($value['__empty']);
        $encodedValue = $this->serializer->serialize($value);

        $this->setValue($encodedValue);
    }

    /**
     * Process data after load
     *
     * @return void
     */
    protected function _afterLoad()
    {
        /** @var string $value */
        $value = $this->getValue();
        if($value) {
            $decodedValue = $this->serializer->unserialize($value);

            $this->setValue($decodedValue);
        }

    }
}

enter image description here

2
  • i want to add it in admin form
    – Mahi M
    Mar 5, 2019 at 9:56
  • hello there how i can add textarea in system.xml
    – Waqar Ali
    Aug 31, 2020 at 10:16
0
<dynamicRows name="dynamic_rows">
    <settings>
        <addButtonLabel translate="true">Add Record</addButtonLabel>
        <additionalClasses>
            <class name="admin__field-wide">true</class>
        </additionalClasses>
        <componentType>dynamicRows</componentType>
    </settings>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">container</item>
            </item>
        </argument>
        <field name="field_1" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="fit" xsi:type="boolean">false</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label>Field #1</label>
            </settings>
        </field>
        
    </container>
</dynamicRows>

Reference : https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/ui-dynamicrows.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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