How to include a Custom Template in the UI Component in Magento 2?

In this article, I will show you how to include a custom template into the UI component fieldset in Magento 2 by the following steps:

Step 1: Generate a form with a UI component file

Step 2: Include a fieldset with code block

Step 3: Form a file Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab\Stock

Step 4: Set a template for this block throws a variable

Step 5: Form a file and implement HTML code to display in the fieldset

Flexible UI rendering in Magento 2 is feasible due to the usage of UI components. By using them, you constitute each page of your online store. Besides, Magento 2 UI components are dependable for supporting interactions of JavaScript components with a server.

Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!
           Get your free live demo now: Click here

Acting as modules, Generate Form in Magento 2 with UI Component has many useful aspects for the online store too. In addition, including a Custom Template into UI Component Fieldset in Magento 2 now have a bit different from Magento 1.

Let’s learn about it now.

How to include a Custom Template in Magento 2?

Step 1:

In my section, I formed a form with UI component file app/code/Webnexs/InventorySuccess/view/adminhtml/ui_component/warehouse_template_form.xml

Step 2:

In this file, I included a fieldset with code block like this:

<fieldset name="stock_on_hand">

<argument name="data" xsi:type="array">

<item name="config" xsi:type="array">

<item name="label" xsi:type="string" translate="true">Stocks On-Hand</item>

<item name="collapsible" xsi:type="boolean">true</item>

<item name="sortOrder" xsi:type="number">30</item>



<container name="stock_on_hand_container" >

<argument name="data" xsi:type="array">

<item name="config" xsi:type="array">

<item name="sortOrder" xsi:type="number">10</item>



<htmlContent name="html_content">

<argument name="block" xsi:type="object">Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab\Stock</argument>




Step 3:

I formed a file Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab\Stock which was extended class \Magento\Backend\Block\Template

namespace Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab;


 * Class Stock

 * @package Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab


class Stock extends \Magento\Backend\Block\Template


Step 4:

In this file I set a template  for this block throw accessible:

protected $_template = 'Webnexs_InventorySuccess::warehouse/stock.phtml';

Step 5:

I formed a file

app/code/Webnexs/InventorySuccess/view/adminhtml/templates/warehouse/stock.phtml and executes HTML code to exhibit in the fieldset.

The above-mentioned steps show you how to include a Custom Template into UI Component Fieldset in Magento 2.

We hope we got you covered on how to include the custom template in Magento 2 admin template.

Develop a Magento store with an extensive platform for better scalability in the coming years.

Custom Template in Magento 2



, ,



Leave a Reply

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