Magento 2 - display html content in system.xml configuration

Question

i want to show some htmlContent in configuration. System.xml. how it could be?

• Rohan Hapani: Did you found solution?
• sudo55: i never checked. you can share your code as wel.

Answer 1

you can append html with following ways

<field id="test" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Some Test</label>
 <comment><![CDATA[test contet]]></comment>
 <frontend_model>Test\Module\Block\Test</frontend_model>
 </field>

block code

<?php
namespace Test\Module\Block;
class Test extends \Magento\Config\Block\System\Config\Form\Field {
 public function __construct(
 \Magento\Backend\Block\Template\Context $context, array $data = []
 ) {
 parent::__construct($context, $data);
 }
 protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
 $html = $element->getElementHtml();
 $value = $element->getData('value');
 $html .= 'use your logice here';
 return $html;
 }
}

• sudo55: Thanks @progos i will check and let you know.
• sudo55: worked well. (y)

Answer 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_order" translate="label" type="select" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
 <label>Date Fields Order</label>
 <frontend_model>Vendor\Module\Block\Adminhtml\Form\Renderer\Config\DateFieldsOrder</frontend_model>
 </field>

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

<?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(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

Hope, it's useful for you.

• sudo55: what if i want to call html file $html?
• Rohan Hapani: You mean you want to add html file path as $html?
• sudo55: yes exactly. instead of wrting complete html code, i want to call html file which is placed in frontend/web/template
• Rohan Hapani: Check my updated answer. commented $html is useful for calling html template file.
• Rohan Hapani: Okay sure... :)