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?

• Dharmendra Jadav: You need to make your own field type to render html.
• Zahirabbas: @DharmendraJadav how do we do that in UI Form
• Dharmendra Jadav: I have added my answer please check.

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>"
);

• Zahirabbas: This is using genric class way i want it using UI form :(
• Dharmendra Jadav: See i have added code for add html.
• Zahirabbas: No dear you not understand my quesion i want it using Ui Form component
• Niket: Hey. Do you know how to solve this? magento.stackexchange.com/q/294109/68281

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.

• Zahirabbas: that will be render as seprate html but i want it in the field like review do.but with UI form
• Amit Bera: Oah, you want to add field or tab ?
• Zahirabbas: Just field with its own html
• Amit Bera: Yes, possiable , but i have to check
• Satish Dubariya: I have have a customer_id field in my admin form but when i edit, i want to show customer name instead of id in form same as in review edit we can see product name. i am using ui_component to render form.