Magento 2: Add html instead of Ui from field?

Question

I used this code to add custom html to form field

<field name="statistics">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">150</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">VendorName\ModuleName\Ui\Component\Listing\Column\Statistics</item>
            <item name="label" translate="true" xsi:type="string">Click</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">popup</item>
            <item name="dataScope" xsi:type="string">click</item>
        </item>
    </argument>
</field>

VendorName\ModuleName\Ui\Component\Listing\Column\Statistics.php

<?php

namespace VendorName\ModuleName\Ui\Component\Listing\Column;

use Magento\Framework\DataObject;

class Statistics extends \Magento\Framework\Data\Form\Element\AbstractElement
{
    public function getElementHtml()
    {
        return "<div>Testing From Div</div>";
    }

}

But it's shows an error:

Answer 1

Kindly update your code:

<field name="statistics">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">150</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">Namespace_Module/form/elements/statistics</item>
            <item name="label" translate="true" xsi:type="string">Click</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">popup</item>
            <item name="dataScope" xsi:type="string">click</item>
        </item>
    </argument>
</field>

Create statistics.html at /web/template/form/elements

<div> your html here <div>

This will work. Enjoy!!

Answer 2

Using the answer of @Sarfaraz bheda, after inseting the field like this:

<field name="statistics">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">150</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">Namespace_Module/form/elements/statistics</item>
            <item name="label" translate="true" xsi:type="string">Click</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">popup</item>
            <item name="dataScope" xsi:type="string">click</item>
        </item>
    </argument>

you can then insert dynamic content into the template at /web/template/form/elements/statistics.html with knockoutJS, eg.:

<span class="admin__field-value"
       data-bind="
        html: value,
        attr: {
            name: inputName,
            id: uid
    }"/>

from magento/module-ui/view/base/web/templates/form/element/html.html