How to Add Custom System Configuration Elements in Magento 2.0

Sometimes module requires to add some custom control elements into the configuration section, like shown on the image below:

Here is how it’s possible to acheive in Magento 2. We need to create the element <frontend_model> for the required attribute in the file app/MyCompany/MyModyle/etc/adminhtml/system.xml. This tag will define our custom field. The block should be extended from the class \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray

<field id="customfields" translate="label" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="0">
   <label>Customer Fields</label>  <frontend_model>MyCompany\MyModule\Block\Customerfield</frontend_model>
</field>

<label>Customer Fields</label> <frontend_model>MyCompany\MyModule\Block\Customerfield</frontend_model>

</field>

Magento Webdesign

Take your online store to the next level with BelVG Magento Webdesign

Visit the page

In order to customize the field we should update the _construct() method of the block MyCompany\MyModule\Block\Customerfield:

protected function _construct()
{
   $this->addColumn('name', ['label' => __('Name')]);
   $this->addColumn('value', ['label' => __('Value')]);
   $this->_addAfter = false;
   $this->_addButtonLabel = __('Add');
   parent::_construct();
}

protected function _construct()

{

$this->addColumn('name', ['label' => __('Name')]);

$this->addColumn('value', ['label' => __('Value')]);

$this->_addAfter = false;

$this->_addButtonLabel = __('Add');

parent::_construct();

}

Once the fields have been added, you will get the following form:

But rendering is only the first step. To save the form, we need to collect user input and send it to the backend. Here we should use the Magento\Config\Model\Config\Backend\Serialized\ArraySerialized class to serialize data before saving.

Also we should specify the <backend_model> class to be used for processing and saving serialized data. Backend model is also defined in the system.xml file.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

<field id="customfields" translate="label" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="0">
   <label>Customer Fields</label>
   <frontend_model>MyCompany\MyModule\Block\Customerfield</frontend_model>
   <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
</field>

<label>Customer Fields</label>

<frontend_model>MyCompany\MyModule\Block\Customerfield</frontend_model>

<backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>

</field>

So now the data of the form will be serialized when saved.

To use the form data in the module we need to implement the unserialization task:

$fields = unserialize($this->_scopeConfig->getValue(self::PATH_TO_FIELD));

1	$fields = unserialize($this->_scopeConfig->getValue(self::PATH_TO_FIELD));

This way the array of the form data is transmitted into the fields variable.

In this example I have described only the simplest way of customizing fields. But there are also other more interesting ways that let you set up and display different fields. Let’s check the method Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray::addColumn(), that is used for adding new fields:

public function addColumn($name, $params)
{
   $this->_columns[$name] = [
       'label' => $this->_getParam($params, 'label', 'Column'),
       'size' => $this->_getParam($params, 'size', false),
       'style' => $this->_getParam($params, 'style'),
       'class' => $this->_getParam($params, 'class'),
       'renderer' => false,
   ];
   if (!empty($params['renderer']) && $params['renderer'] instanceof \Magento\Framework\View\Element\AbstractBlock) {
       $this->_columns[$name]['renderer'] = $params['renderer'];
   }
}