Custom Admin Button OnClick Add more Group Of Fields to Section

Question

I Created Custom IconSlider Module That Can Be controlled from Store-Configuration.

Each slider Have the Same 3 Fields (Name,URL,Image).

i added a few groups With that fields But every time i want to add 1 more slider i need to copy and past a new group with the same fields and thats not really smart..

So i manage to add new field type = "Button" that show at the bottom of the groups.

what i am trying to do is When i click on this button that he will add automaticlly a New Group With Empty Fields(Name,URL,Image).

etc/adminhtml/System.xml

 <field id="AddNewFields" translate="label" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <frontend_model>Vendor\Module\Block\System\Config\Button</frontend_model>
 </field>

Vendor\Module\Block\System\Config\Button.php

<?php
 namespace Vendor\Module\Block\System\Config;
 use Magento\Config\Block\System\Config\Form\Field;
 use Magento\Backend\Block\Template\Context;
 use Magento\Framework\Data\Form\Element\AbstractElement;
 class Button extends Field
{
protected $_template = 'Vendor_Module::System/Config/Button.phtml';
public function __construct(Context $context, array $data = [])
{
 parent::__construct($context, $data);
}
public function render(AbstractElement $element)
{
 $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
 return parent::render($element);
}
protected function _getElementHtml(AbstractElement $element)
{
 return $this->_toHtml();
}
public function getCustomUrl()
{
 return $this->getUrl('router/controller/action');
}
public function getButtonHtml()
{
 $button = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')->setData(['id' => 'CustomButtonAddFields', 'label' => __('Add New Icon Slider'),]);
 return $button->toHtml();
}
public function addCustomfield(Magento\Framework\Data\Form\Element\Fieldset $fieldset)
{
 
}

}

Vendor_Module/view/adminhtml/templates/System/Config/Button.phtml

<?php
/* @var \Vendor\Module\Block\System\config\Button $block */
$controller = $block->getCustomUrl();
echo $block->getButtonHtml();
?>
<script>
require([
 'jquery'
], function($){
 $('#CustomButtonAddFields').on('click', function() {
 alert('Clicked!~');
 })
});

As You Can See I Created A New Function At Vendor\Module\Block\System\Config\Button.php Called addCustomfield And I want To Activate This Function From The Button.Phtml OnClick Event.

Thats How Its Look In The Admin Panel :

Click Here : Preview

so what Should I Do In This addCustomfield Function ?

Ty .

Answer 1

system.xml

<field id="add_new_fields" translate="label comment" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
 <frontend_model>Vendor\Module\Block\System\Config\Button</frontend_model>
</field>

Button.php

<?php
namespace Vendor\Module\Block\System\Config;
use Magento\Backend\Block\Template\Context;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
class Collect extends Field
{
 /**
 * @var string
 */
 protected $_template = 'Vendor_Module::System/Config/button.phtml';
 /**
 * @param Context $context
 * @param array $data
 */
 public function __construct(
 Context $context,
 array $data = []
 ) {
 parent::__construct($context, $data);
 }
 /**
 * Remove scope label
 *
 * @param AbstractElement $element
 * @return string
 */
 public function render(AbstractElement $element)
 {
 $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
 return parent::render($element);
 }
 /**
 * Return element html
 *
 * @param AbstractElement $element
 * @return string
 */
 protected function _getElementHtml(AbstractElement $element)
 {
 return $this->_toHtml();
 }
 /**
 * Return ajax url for collect button
 *
 * @return string
 */
 public function getAjaxUrl()
 {
 return $this->getUrl('add_new_fields/system_config/collect'); //here you can set your configration path
 }
 /**
 * Generate collect button html
 *
 * @return string
 */
 public function getButtonHtml()
 {
 $button = $this->getLayout()->createBlock(
 'Magento\Backend\Block\Widget\Button'
 )->setData(
 [
 'id' => 'collect_button',
 'label' => __('Collect Data'),
 ]
 );
 return $button->toHtml();
 }
}
?>

button.phtml

<script>
 require([
 'jquery',
 'prototype'
 ], function(jQuery){
 jQuery('#collect_button').click(function () {
 alert('This is Testing');
 });
 });
</script>
<?php echo $block->getButtonHtml() ?>

• Yakir56: Can You Be More Specific Please ? i notice public function getAjaxUrl() { return $this->getUrl('add_new_fields/system_config/collect'); //here you can set your configration path } But How Does This Create More Fields ?
• Ronak Rathod: section_id/group_id/field_id
• Ronak Rathod: if you add your config full code I will add your config path
• Yakir56: I added My system.xml file ^
• Ronak Rathod: iconslider/sliders/addnewfields try this path

Answer 2

System.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
 <tab id="kravitz" translate="label" sortOrder="10">
 <label>Kravitz</label>
 </tab>
 <section id="iconslider" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
 <class>separator-top</class>
 <label>Icon Slider</label>
 <tab>kravitz</tab>
 <resource>vendor_module::config_IconSLider</resource>
 <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>General Configuration</label>
 <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Module Enable</label>
 <comment>Set To 'Yes' If You Want The Icon Slider Module To Be display At Frontend.</comment>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field>
 <field id="display_text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Block title</label>
 <comment>This is Optional, Leave Empty If You Dont Want Any Title To Be Display On Icon Slider block.
 if Not Empty The Title will display At Frontend.</comment>
 </field>
 </group>
 <group id="sliders" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon Sliders</label>
 <group id="generalslider" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon 1</label>
 <field id="text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Name</label>
 <comment>This Filed Is Optional, display The Icon Name</comment>
 </field>
 <field id="url" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Url Link</label>
 <comment>This Filed Is Optional, Attached The Link To The Icon Name !</comment>
 </field>
 <field id="imageupload" translate="label" type="image" sortOrder="1" showInStore="0" showInDefault="1" showInWebsite="1" >
 <label>Upload Icon Image</label>
 <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
 <upload_dir config="system">IconSlider</upload_dir>
 <comment>This Filed Is Requierd !, If Ther Is No file Chosen The Slider Will Not Display !</comment>
 </field>
 </group>
 <group id="generalslider2" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon 2</label>
 <field id="text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Name</label>
 <comment>This Filed Is Optional, display The Icon Name</comment>
 </field>
 <field id="url" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Url Link</label>
 <comment>This Filed Is Optional, Attached The Link To The Icon Name !</comment>
 </field>
 <field id="imageupload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\Image" sortOrder="1" showInStore="0" showInDefault="1" showInWebsite="1" >
 <label>Upload Icon Image</label>
 <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
 <upload_dir config="system">IconSlider</upload_dir>
 <comment>This Filed Is Requierd !, If Ther Is No file Chosen The Slider Will Not Display !</comment>
 </field>
 </group>
 <group id="generalslider3" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon 3</label>
 <field id="text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Name</label>
 <comment>This Filed Is Optional, display The Icon Name</comment>
 </field>
 <field id="url" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Url Link</label>
 <comment>This Filed Is Optional, Attached The Link To The Icon Name !</comment>
 </field>
 <field id="imageupload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\Image" sortOrder="1" showInStore="0" showInDefault="1" showInWebsite="1" >
 <label>Upload Icon Image</label>
 <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
 <upload_dir config="system">IconSlider</upload_dir>
 <comment>This Filed Is Requierd !, If Ther Is No file Chosen The Slider Will Not Display !</comment>
 </field>
 </group>
 <group id="generalslider4" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon 4</label>
 <field id="text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Name</label>
 <comment>This Filed Is Optional, display The Icon Name</comment>
 </field>
 <field id="url" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Url Link</label>
 <comment>This Filed Is Optional, Attached The Link To The Icon Name !</comment>
 </field>
 <field id="imageupload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\Image" sortOrder="1" showInStore="0" showInDefault="1" showInWebsite="1" >
 <label>Upload Icon Image</label>
 <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
 <upload_dir config="system">IconSlider</upload_dir>
 <comment>This Filed Is Requierd !, If Ther Is No file Chosen The Slider Will Not Display !</comment>
 </field>
 </group>
 <group id="generalslider5" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Icon 5</label>
 <field id="text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Name</label>
 <comment>This Filed Is Optional, display The Icon Name</comment>
 </field>
 <field id="url" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Url Link</label>
 <comment>This Filed Is Optional, Attached The Link To The Icon Name !</comment>
 </field>
 <field id="imageupload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\Image" sortOrder="1" showInStore="0" showInDefault="1" showInWebsite="1" >
 <label>Upload Icon Image</label>
 <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
 <upload_dir config="system">IconSlider</upload_dir>
 <comment>This Filed Is Requierd !, If Ther Is No file Chosen The Slider Will Not Display !</comment>
 </field>
 </group>
 <field id="addnewfieldsbutton" translate="label" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <frontend_model>Vendor\module\Block\System\Config\Button</frontend_model>
 </field>
 </group>
 </section>
</system>

Button.php

<?php
namespace Vendor\Module\Block\System\Config;
 use Magento\Backend\Block\Template\Context;
 use Magento\Config\Block\System\Config\Form\Field;
 use Magento\Framework\Data\Form\Element\AbstractElement;
 class Button extends Field
{
/**
 * @var string
 */
protected $_template = 'Vendor_Module::System/Config/Button.phtml';
/**
 * @param Context $context
 * @param array $data
 */
public function __construct(Context $context, array $data = [])
{
 parent::__construct($context, $data);
}
/**
 * Remove scope label
 *
 * @param AbstractElement $element
 * @return string
 */
public function render(AbstractElement $element)
{
 $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
 return parent::render($element);
}
/**
 * Return element html
 *
 * @param AbstractElement $element
 * @return string
 */
protected function _getElementHtml(AbstractElement $element)
{
 return $this->_toHtml();
}
/**
 * Return ajax url for collect button
 *
 * @return string
 */
public function getAjaxUrl()
{
 return $this->getUrl('iconslider/sliders/addnewfields'); //here you can set your configration path
}
/**
 * Generate collect button html
 *
 * @return string
 */
public function getButtonHtml()
{
 $button = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')->setData(['id' => 'addnewfields', 'label' => __('Add New Icon Slider'),]);
 return $button->toHtml();
}
 }

Button.phtml

<?php
/* @var \Vendor\Module\Block\System\config\Button $block */
?>
 <script>
 require([
 'jquery',
 'prototype'
], function($){
 $('#addnewfields').click(function () {
 alert('This is Testing');
 });
});
 </script>
 <?php echo $block->getButtonHtml() ?>