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

Improve this question

2 Answers 2

Reset to default
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!!

Improve this answer
3
  • nice work ! keep it up! Commented Nov 10, 2017 at 6:06
  • very useful answers !! Commented Mar 6, 2019 at 4:27
  • 1
    how do i pass parameters to that .phtml ? Commented 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

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.