Add Tab On Product Edit Page Magento2 Admin

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.

Rahul Mahto 5 Badges

• 3 years ago
  Updated by - Ishtiyaque Ahmad
• 10 years ago
  Updated by - Rahul Mahto

View More