How to include a Custom Template in to UI Component Fieldset in Magento 2

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

Step 1: Generate a form with 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. Acting as modules, Generate Form in Magento 2 with UI Component has many useful aspects for the online store too. In addition, include a Custom Template into UI Component Fieldset in Magento 2 now have a bit different from Magento 1.   Let‘s study about it now.

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 extends 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 in to UI Component Fieldset in Magento 2

Last Update: April 7, 2018  

March 15, 2018   472   Nandini R    Operations    
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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

Facebook
Twitter
INSTAGRAM
LinkedIn