How to create custom table field in system.xml of the module

Question

Problem

I need two-column table. First — simple text field and the second should be an image.

What was done

Now I have this. The second column should be an image.

Code

class Customermap extends \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray
{


    protected $_customerGroupRenderer;

    protected $_addAfter = false;


    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        array $data = [ ]
    ) {
        parent::__construct($context, $data);
    }


    protected function _prepareToRender()
    {
        $this->addColumn('field1', [ 'label' => __('Адрес'), 'size' => 300 ]);
        $this->addColumn('customer_group', [
                'label'    => __('Customer Group'),
                'renderer' => $this->_customerGroupRenderer
            ]);


    }

}

Additional information

Saw one example with something called "GroupRender", but suppose it was wrong. In source files saw some "renders" to transfer in "addColumn" method, but can't understand how to use it.

Answer 1

Try adding this method to your Customermap class:

    protected function getCustomerGroupRenderer()
    {
        if (!$this->_customerGroupRenderer) {
            $this->_customerGroupRenderer = $this->getLayout()->createBlock(
                'Path\To\CustomerGroup\Element',
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
        }
        return $this->_customerGroupRenderer;
    }

'Path\To\CustomerGroup\Element' is a class that will extend AbstractBlock that has the logic for mapping customer groups to images. Use the _toHtml method to specify your image element.

You then change the _prepareToRender method in Customermap to this:

    protected function _prepareToRender()
    {
        $this->addColumn('field1', [ 'label' => __('Адрес'), 'size' => 300 ]);
        $this->addColumn('customer_group', [
                'label'    => __('Customer Group'),
                'renderer' => $this->getCustomerGroupRenderer()
            ]);


    }

Answer 2

In addition with @Aaron Allen post, if your field customer_group is a select element you need one more function to retrieve the selection of each field, in Customermap class :

/**
 * Prepare existing row data object
 *
 * @param DataObject $row
 *
 * @return void
 */
protected function _prepareArrayRow(DataObject $row)
{
    $customerGroup = $row->getCustomerGroup();
    $options = [];
    if (!is_null($customerGroup) && $cmsBlock) {
        $options['option_' . $this->getCustomerGroupRenderer()->calcOptionHash($customerGroup)] = 'selected="selected"';
    }
    $row->setData('option_extra_attrs', $options);

    return;
}