Add new tab in product edit page in admin Magento 2

**

Below code Specially for Magento 2.2.0 and above

**

Vendor/Module/registration.php put below code.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

add the module.xml file in Vendor/Module/etc/module.xml put below code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0"></module>
</config>

Now create uicomponent form xml Vendor/Module/view/adminhtml/ui_component/product_form.xml put below code.

<?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="testingproduct">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Testing Group</item>
                <item name="provider" xsi:type="string">product</item>
                <item name="dataScope" xsi:type="string">data.product</item>
                <item name="sortOrder" xsi:type="number">2</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
                <item name="ns" xsi:type="string">product_form</item>
            </item>
        </argument>
        <container name="testing_group">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">1</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\Edit\Tab\CustomData</argument>
            </htmlContent>
        </container>
    </fieldset>
</form>

In Block Vendor/Module/Block/Adminhtml/Product/Edit/Tab/CustomData.php put below code:

<?php

namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab;
use Magento\Backend\Block\Template\Context;
use Magento\Framework\Registry;

class CustomData extends \Magento\Framework\View\Element\Template
{
    protected $_template = 'customdata.phtml';

    protected $_coreRegistry = null;

    public function __construct(
        Context $context,
        Registry $registry,
        array $data = []
    )
    {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    public function getProduct()
    {
        return $this->_coreRegistry->registry('current_product');
    }
}

In templates Vendor/Module/view/adminhtml/templates/customdata.phtml put below code.

<div>
   <span><?php echo __("Some Custom Data");?></span>
</div>

Magento 2.1 :-If you have magento 2.1, also use this code for simple tab add in product edit page. Create Own module and put below code in view/adminhtml/layout/catalog_product_new.xml

 <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product_form">
            <block class="Vendor\Module\Block\Adminhtml\Product\Edit\Tab\Welcome" name="product.welcome" as="custom-tab" >
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">Product Welcome</item>
                        <item name="collapsible" xsi:type="boolean">true</item>
                        <item name="opened" xsi:type="boolean">true</item>
                        <item name="sortOrder" xsi:type="string">2</item>
                        <item name="canShow" xsi:type="boolean">true</item>
                        <item name="componentType" xsi:type="string">fieldset</item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
    </page>

In block Vendor/Module/Block/Adminhtml/Product/Edit/Tab/Welcome.php put below code.

<?php

namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab;
use Magento\Backend\Block\Template\Context;
use Magento\Framework\Registry;

class Welcome extends \Magento\Framework\View\Element\Template
{
    protected $_template = 'catalog/product/edit/welcome.phtml';

    protected $_coreRegistry = null;

    public function __construct(
        Context $context,
        Registry $registry,
        array $data = []
    )
    {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    public function getProduct()
    {
        return $this->_coreRegistry->registry('current_product');
    }
}

In templates Vendor/Module/view/adminhtml/templates/catalog/product/edit/welcome.phtml put below code.

<div class="welcome">
    <?php echo __('Welcome !'); ?>
</div>

Now Check Product edit page. It's working perfect.


[EDIT] this does not work anymore for magento 2.1

you can create you own module.
In this module, create a file called view/adminhtml/layout/catalog_product_new.xml with this content

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product_tabs">
            <action method="addTabAfter">
                <argument name="tabId" xsi:type="string">tab-code-here</argument>
                <argument name="tab" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Tab label here</item>
                    <item name="class" xsi:type="string">ajax</item>
                    <item name="url" xsi:type="helper" helper="[Namespace]\[Module]\Helper\Url::getUrl" />
                    <item name="group_code" xsi:type="string">basic</item>
                </argument>
                <argument name="after" xsi:type="string">product-details</argument>
            </action>
        </referenceBlock>
    </body>
</page>

then create the file Helper/Url.php with this content:

<?php
namespace [Namespace]\[Module]\Helper;

class Url
{
    /**
     * @var \Magento\Framework\UrlInterface
     */
    protected $urlBuilder;

    /**
     * @param \Magento\Framework\UrlInterface $urlBuilder
     */
    public function __construct(
        \Magento\Framework\UrlInterface $urlBuilder
    )
    {
        $this->urlBuilder = $urlBuilder;
    }
    public function getUrl()
    {
        return $this->urlBuilder->getUrl('your_tab/url/here', ['_current' => true]);
    }
}

this will add the tab right after "Product Details" tab. To re-position it, play around with the parameters from the xml file.

Tags:

Magento2

Recent Posts