Render pure HTML in magento admin form using UI form

Question

I created one extenssion want to render some Pure HTML from the other blockand phtml file.

I have review some magento core code to render like this but not able to find the things.

In the review form magento still using generic class to render like this.

$fieldset->addField('customer', 'note', ['label' => __('Author'), 'text' => $customerText]);

    $fieldset->addField(
        'summary-rating',
        'note',
        [
            'label' => __('Summary Rating'),
            'text' => $this->getLayout()->createBlock(
                \Magento\Review\Block\Adminhtml\Rating\Summary::class
            )->toHtml()
        ]
    );

why magento still using generic class like this is there no way to do like this using UI form?

Answer 1

Please add below code in you Form.php. I have make it for image html you can change as per your need.

$fieldset->addType('productimage', '\<Vendor>\<ModuleName>\Block\Adminhtml\Form\Edit\Tab\ImageRenderer');
    $fieldset->addField('product_image_url', 'productimage', array(           
       'label'     => __('Image')
    ));

And add ImageRenderer.php put there.

<?php

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

namespace <Vendor>\<ModuleName>\Block\Adminhtml\Form\Edit\Tab;

/**
 * Description of ImageRenderer
 *
 * @author dharmendra
 */
class ImageRenderer extends \Magento\Framework\Data\Form\Element\AbstractElement
{
    /**
     * get category name
     * @param  DataObject $row
     * @return string
     */
    public function getElementHtml()
    {
        // here you can write your code.
        $html = '';

        if ($this->getValue()) 
        {
            $html = $this->getMediaImageHtml($this->getValue());


        } 

        return $html;
    }

    public function getMediaImageHtml($imageName)
    {
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')
                            ->getStore()
                            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        $html = "<img src='".$mediaUrl.'catalog/product/'.$imageName."' height='100px' width='100px'>";        
        return $html;
    }
}

Still if you have any query let me know.

also you can add html like below.

$attribute->setAfterElementHtml("   
            <script type=\"text/javascript\">
            require([
                'jquery',
                'mage/template',
                'jquery/ui',
                'mage/translate'
            ],
            function($, mageTemplate) {
               $('#edit_form').on('change', '#page_attribute_id', function(event){
                $.ajax({
                   url : '". $this->getUrl('attributeicon/ajax/attributeoptions') . "attribute_id/' +  $('#page_attribute_id').val(),
                   type: 'get',
                   dataType: 'json',
                   showLoader:true,
                   success: function(data){
                    $('#page_option_id').empty();
                    $('#page_option_id').append(data.htmlconent);
                }
            });
        })
    }

);
</script>"
);

Answer 2

Yes, you can render Pure HTML from the other block and phtml file. A good example, Magento Customer module: admin customer edit form ui element customer_form.xml

app/code/Magento/Customer/view/base/ui_component/customer_form.xml

  <htmlContent name="customer_edit_tab_view_content">
        <block class="Magento\Customer\Block\Adminhtml\Edit\Tab\View" name="customer_edit_tab_view" template="Magento_Customer::tab/view.phtml">
            <arguments>
                <argument name="sort_order" xsi:type="number">10</argument>
                <argument name="tab_label" xsi:type="string" translate="true">Customer View</argument>
            </arguments>
            <block class="Magento\Customer\Block\Adminhtml\Edit\Tab\View\PersonalInfo" name="personal_info" template="Magento_Customer::tab/view/personal_info.phtml"/>
        </block>
    </htmlContent>

Using xml <htmlContent> you can add a block to Ui form.