How to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2

Magento 2 CMS not only facilitates users to customize the default features but also to add new features, buttons, forms, tabs, or any components in order to provide advanced functionalities that improve the store in terms of performance, administration, customer experience, etc.

You may develop Magento 2 extensions that extend such custom features in the online store.

While developing such extensions, you may require to create a custom tab and call custom phtml in product UI-component form in Magento 2 to take any input value from the admin.

The product UI-component form in Magento 2 allows the admin to create different Magento 2 product types such as simple, configurable, virtual, downloadable, bundle products, and edit them from the backend Catalog > Products > Product edit form.

The ‘product edit form’ offers various tabs by default. However, these default tabs are not always enough to meet the business requirement. The store owner may require an additional tab to upload a CSV file or enable/disable the custom module that offers product-specific features.

For example,

Check out the below solution and add your required customized components under the custom tab.

Also, if you may need to add a custom button in the admin product UI component form in Magento 2, you can refer to my solution here.

Method to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2

1. Create the product_form.xml file at app/code/Vendor/Module/view/adminhtml/ui_component
   
   
   <?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="custom_tab"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Custom tab</item> <item name="collapsible" xsi:type="boolean">true</item> <item name="opened" xsi:type="boolean">true</item> <item name="canShow" xsi:type="boolean">true</item> <item name="sortOrder" xsi:type="string">1</item> </item> </argument> <container name="custom_tab_container"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sortOrder" xsi:type="string">1</item> </item> </argument> <htmlContent name="html_content"> <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\CustomTab</argument> </htmlContent> </container> </fieldset> </form>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   <?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">     <fieldset name="custom_tab">         <argument name="data" xsi:type="array">             <item name="config" xsi:type="array">                 <item name="label" xsi:type="string" translate="true">Custom tab</item>                 <item name="collapsible" xsi:type="boolean">true</item>                 <item name="opened" xsi:type="boolean">true</item>                 <item name="canShow" xsi:type="boolean">true</item>                 <item name="sortOrder" xsi:type="string">1</item>             </item>         </argument>         <container name="custom_tab_container">             <argument name="data" xsi:type="array">                 <item name="config" xsi:type="array">                     <item name="sortOrder" xsi:type="string">1</item>                 </item>             </argument>             <htmlContent name="html_content">                 <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\CustomTab</argument>             </htmlContent>         </container>     </fieldset> </form>

2. Create the CustomTab.php file at app/code/Vendor/Module/Block/Adminhtml/Product
   
   
   <?php namespace Vendor\Module\Block\Adminhtml\Product; use Magento\Backend\Block\Template; class CustomTab extends Template { protected $_template = 'custom_tab.phtml'; }

   1 2 3 4 5 6 7 8 9

   <?php namespace Vendor\Module\Block\Adminhtml\Product; use Magento\Backend\Block\Template;   class CustomTab extends Template {     protected $_template = 'custom_tab.phtml';   }

3. Create the custom_tab.phtml file at app/code/Vendor/Module/view/adminhtml/templates
   
   
   <?php echo "coustom tab"; ?>

   1 2 3

   <?php echo "coustom tab"; ?>

The custom tab in the product UI-component form looks as shown below:

That’s it!

Any doubts about this solution can be mentioned in the Comments section below.

I’d be happy to help.

Also, do share the post with Magento Community via social media.

Thank you.