Magento 2.1 – How to Add Custom HTML Renderer in Admin Form

adminformmagento-2.1

How can I add custom html renderer for my for element.

I need a text bux besides it a button which will call ajax when clicking on it to do some random work. How can I implement it.

here is my form field

<fieldset name="General">
            <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string"/>
                    </item>
            </argument>
            <field name="product_id">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" translate="true" xsi:type="string">product_name</item>
                        <item name="formElement" xsi:type="string">input</item>
                        <item name="source" xsi:type="string">Import</item>
                        <item name="sortOrder" xsi:type="number">10</item>
                        <item name="dataScope" xsi:type="string">product_name</item>
                        <item name="validation" xsi:type="array">
                                <item name="required-entry" xsi:type="boolean">false</item>
                        </item>
                    </item>
                </argument>
            </field>
    </fieldset>

Best Answer

According to magento sample module you can set render following way:

<field name="color">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <!--component constructor-->
            <item name="component" xsi:type="string">Magento_SampleForm/js/form/element/color-select</item>
            <!--main template for form field that renders elementTmpl as a child template-->
            <item name="template" xsi:type="string">ui/form/field</item>
            <!--customized form element template that will show colors-->
            <item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>
            <item name="label" xsi:type="string">Autumn colors</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">sampleform</item>
        </item>
    </argument>
</field>

Following tag is responsible for custom template

<item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>

Related Solutions

Adminform Renderer – How to Use Custom HTML Element in Admin Form Field

Renderer file:

class NameSpace]_[ModuleName]_Block_Adminhtml_Review_Renderer_Images extends  Varien_Data_Form_Element_Abstract
{
    
    public function getElementHtml()
    {   
    
        $html = '';         
            $html = $html.'<input id="input-21d" name="rating" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm" data-disabled="true">';           
        return $html;
    }
}

in your form.php

$fieldset->addType('customtype', '[NameSpace]_[ModuleName]_Block_Adminhtml_Review_Renderer_Images');     
     $fieldset->addField('rating', 'customtype', array(
        'name'      => 'rating',
        'label'     => Mage::helper('[modulename]')->__('Rating'),
    ));

using this you can use custom html in admin form field

Magento 2 – How to Add Category Selector on Admin Form

If you just want to add tree input renderer you can add this code in your ui component form xml

<field name="parent">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Parent Category</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">data.parent</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">false</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

Best Answer

Related Solutions

Adminform Renderer – How to Use Custom HTML Element in Admin Form Field

Magento 2 – How to Add Category Selector on Admin Form

Related Topic