2

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:

enter image description here

2 Answers 2

6

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!!

3
  • nice work ! keep it up! Nov 10, 2017 at 6:06
  • very useful answers !! Mar 6, 2019 at 4:27
  • 1
    how do i pass parameters to that .phtml ? Sep 28, 2021 at 1:41
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.