3

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?

3
  • You need to make your own field type to render html. Commented Oct 1, 2018 at 10:41
  • @DharmendraJadav how do we do that in UI Form
    – Zahirabbas
    Commented Oct 1, 2018 at 10:49
  • I have added my answer please check. Commented Oct 1, 2018 at 10:54

2 Answers 2

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>"
);
4
  • This is using genric class way i want it using UI form :(
    – Zahirabbas
    Commented Oct 1, 2018 at 10:55
  • See i have added code for add html. Commented Oct 1, 2018 at 10:59
  • No dear you not understand my quesion i want it using Ui Form component
    – Zahirabbas
    Commented Oct 1, 2018 at 11:11
  • Hey. Do you know how to solve this? magento.stackexchange.com/q/294109/68281
    – Niket
    Commented Oct 31, 2019 at 5:30
0

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.

7
  • that will be render as seprate html but i want it in the field like review do.but with UI form
    – Zahirabbas
    Commented Oct 1, 2018 at 10:47
  • Oah, you want to add field or tab ?
    – Amit Bera
    Commented Oct 1, 2018 at 10:49
  • Just field with its own html
    – Zahirabbas
    Commented Oct 1, 2018 at 10:49
  • 1
    Yes, possiable , but i have to check
    – Amit Bera
    Commented Oct 1, 2018 at 10:51
  • 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. Commented Mar 14, 2019 at 7:24

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.