Menu Close

    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.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Finally create template file demo.phtml in location Webkul/Demo/view/adminhtml/templates/product/edit.

    This is demo tab content.

    Add Tab

    If you have any query please comment below.

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    11 comments

  • kavya k
    I followed the above steps which are mentioned in tutorial, but it is not working in ver 2.2.4
  • Zulqarnain Abdul Jabbar
    An easy to follow blog. Thank you for sharing.
    • Zulqarnain Abdul Jabbar
      I further work to add a form in demo.phtml file
  • Johan van de Vijver
    Hi, i followed your steps of this tutorial. But unfortunately the custom tab is not showing. Is this applicable in Magento 2.2?
    • Webkul Support
      We will try to add that in future blog
      • sunil verma
        Any news how to add it on v 2.2
        • sunil verma
          Hi Support, is there any tutorial doe v 2.2, above is not working in 2.2 version.
  • Sikander Al Masum
    I did exactly like the tutorial, but unfortunately not working. Im using ver 2.1.5.
  • kumarg311
    I create textbox in demo.phtml but textbox value not posted on product save
  • Futuresoft India
    I create textbox in demo.phtml but textbox value not posted on product save
  • Maciej Sroka
    How do you remove the Tab that is already there?
  • Back to Top