How to find content from a UI component in Magento 2

Magento UI components are designed with simple and flexible UI Rendering. They permit you to configure the page controlling the UI components.

Magento UI Elements are executed as a standard module and can be found under Magento \ UI namespace.

Components are answerable for rendering result page fragments and offering/supporting further interactions of JavaScript components and server.

Here, we will try to write a function in class PHP to find content from a UI Component.


namespace Webnexs\InventorySuccess\Helper;

use Magento\Framework\View\Element\UiComponentFactory;

use Magento\Framework\View\Element\BlockFactory;

use Magento\Framework\View\Layout\Generator\Context as GeneratorContext;

use Magento\Framework\View\Element\UiComponent\ContextFactory as UiComponentContextFactory;


* Class RenderUiComponent

* @package Webnexs\InventorySuccess\Helper


class RenderUiComponent extends \Magento\Framework\View\Layout\Generator\UiComponent



    * @var GeneratorContext


   protected $generatorContext;


    * RenderUiComponent constructor.

    * @param UiComponentFactory $uiComponentFactory

    * @param BlockFactory $blockFactory

    * @param UiComponentContextFactory $contextFactory

    * @param GeneratorContext $generatorContext


   public function __construct(

       UiComponentFactory $uiComponentFactory,

       BlockFactory $blockFactory,

       UiComponentContextFactory $contextFactory,

       GeneratorContext $generatorContext


       $this->generatorContext = $generatorContext;

       parent::__construct($uiComponentFactory, $blockFactory,$contextFactory );



    * @param $name

    * @return string


   public function renderUiComponent($name){

       $structure = $this->generatorContext->getStructure();

       $layout = $this->generatorContext->getLayout();

       $data = [


               'group' =>'',

               'component' =>''



       $uicomponent = $this->generateComponent($structure, $name, $data, $layout);

       return $uicomponent->toHtml();


  • Now you can label the function render Uicomponent like the following example:

namespace Webnexs\InventorySuccess\Observer\Permission\Staff;

use Magento\Framework\Event\Observer as EventObserver;

use Magento\Framework\Event\ObserverInterface;

use Webnexs\InventorySuccess\Helper\RenderUiComponent;

use Webnexs\InventorySuccess\Model\Permission\PermissionManagement;

class ViewBlockAbstractToHtmlBefore implements ObserverInterface


   protected $generatorContext;

   protected $permissionManagement;

   public function __construct(

       RenderUiComponent $renderUiComponent,

       PermissionManagement $permissionManagement


       $this->renderUiComponent = $renderUiComponent;

       $this->permissionManagement = $permissionManagement;



    * @param EventObserver $observer

    * @return $this


   public function execute(EventObserver $observer)


       $block = $observer->getEvent()->getBlock();

       if($block instanceof \Magento\User\Block\User\Edit\Tabs

               && $this->permissionManagement->checkPermission('Webnexs_InventorySuccess::manage_permission')){




                   'label' => __('Warehouse'),

                   'title' => __('Warehouse'),

                   'after' => __('roles_section'),

                   'content' => $this->renderUiComponent->renderUiComponent('os_user_permission_form')




       return $this;



I Hope all you guys can study Magento 2 easier with our tutorial. The step I mention above is the simplest process for you to Getting Content from a UI Component. With this information, you can handle the UI Component effortlessly. Each store has a UI Component in Magento 2 with serveral elements.






Leave a Reply

Your email address will not be published. Required fields are marked *