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> </item> </argument> <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> </item> </argument> <htmlContent name="html_content"> <argument name="block" xsi:type="object">Webnexs\InventorySuccess\Block\Adminhtml\Warehouse\Edit\Tab\Stock</argument> </htmlContent> </container> </fieldset>
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.
Leave a Reply