Here we will learn how to add Tab on product edit page magento admin
Add Tab on Product Page
First of all create ‘di.xml’ file in location Webkul/Demo/etc/adminhtml/di.xml.
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="demo-tab" xsi:type="array"> <item name="class" xsi:type="string">Webkul\Demo\Ui\DataProvider\Product\Form\Modifier\DemoTab</item> <item name="sortOrder" xsi:type="number">20</item> </item> </argument> </arguments> </virtualType> </config>
Now create DemoTab.php in location Webkul\Demo\Ui\DataProvider\Product\Form\Modifier.
<?php namespace Webkul\Demo\Ui\DataProvider\Product\Form\Modifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier; use Magento\Framework\View\LayoutFactory; use Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo; class DemoTab extends AbstractModifier { protected $layoutFactory; public function __construct( LayoutFactory $layoutFactory ) { $this->layoutFactory = $layoutFactory; } /** * Modify data * * @param array $data * @return array */ public function modifyData(array $data) { return $data; } /** * Modify meta data * * @param array $meta * @return void */ public function modifyMeta(array $meta) { $meta['demo_tab'] = [ "children" => [ "demo_tab_container" => [ "arguments" => [ "data" => [ "config" => [ "formElement" => "container", "componentType" => "container", 'component' => 'Magento_Ui/js/form/components/html', "required" => 0, "sortOrder" => 5, "content" => $this->layoutFactory->create()->createBlock( Demo::class )->toHtml(), ] ] ] ] ], "arguments" => [ "data" => [ "config" => [ "componentType" => "fieldset", "label" => __("Demo Tab"), "collapsible" => true, "sortOrder" => 5, 'opened' => true, 'canShow' => true ] ] ] ]; return $meta; } }
Now create block Demo.php in location Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab.
<?php namespace Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab; class Demo extends \Magento\Backend\Block\Widget { /** * @var string */ protected $_template = 'product/edit/demo.phtml'; }
protected $_template = ‘product/edit/demo.phtml’
This template file will be called in tab content.
Finally create template file demo.phtml in location Webkul/Demo/view/adminhtml/templates/product/edit.
This is demo tab content.
If you have any query please comment below.
11 comments