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

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,

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

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

  2. Create the CustomTab.php file at app/code/Vendor/Module/Block/Adminhtml/Product

  3. Create the custom_tab.phtml file at app/code/Vendor/Module/view/adminhtml/templates

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

screenshot

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.

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

5
(based on 8 Reviews)

Milan is a Magento Developer at Meetanshi. Apart from work, he plays cricket passionately. He loves reading books in his free time.

Leave a reply:

Your email address will not be published.