Display htmlContent in Configuration in Magento 2

You need to add block file in as <frontend_model> in your xml file.

What is frontend_model ?

we can say that, frontend_model specifies one type class in which you can add file path of block/model and then call phtml file/data for add custom input fields.

system.xml :

<field id="date_fields" translate="label" type="select" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1"> <label>Images</label> <frontend_model>Vendor\Module\Block\Adminhtml\Form\Renderer\CountDown</frontend_model> </field>

CountDown.php (Vendor\Module\Block\Adminhtml\Form\Renderer\CountDown) :

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace Vendor\Module\Block\Adminhtml\Form\Renderer\Config;

use Magento\Backend\Block\Template\Context;
use Magento\Framework\Data\Form\Element\AbstractElement;

class DateFieldsOrder extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * @param Context $context
     * @param array $data
     */
    public function __construct(
        Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * Retrieve Element HTML fragment
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        //$html = $this->layout->createBlock('Vendor\Module\Block\File')->setData($data)->setTemplate('Vendor_Module::file.phtml')->toHtml();
        $html = '<tr id="row_' . $element->getHtmlId() . '" style="display: none;"></tr>'; //You can add here your html code
        return parent::_getElementHtml($element) . $html;
    }
}

You can take reference : vendor/magento/module-catalog/etc/adminhtml/system.xml

 

About Ejaz Alam

A Software Engineer who Believes in a simple lifestyle and follow a simple logic to make himself better than yesterday. :)

View all posts by Ejaz Alam →

Leave a Reply

Your email address will not be published. Required fields are marked *