Our Work

Add Custom Tab to Product Edit in Magento 2

Updated 7 days ago

Here we will see how to add new custom tab on product edit page in magento2.

  • Create a module
  • Add custom tab to product form

1.Module

1.1 Create module

Create module which is  extended from Magento_Catalog module.Please refer this article for Module Creation.
https://ktree.com/create-magento-2-module-custom.html

List of created files other then default files

  • app/code/KTree/Custom/etc/adminhtml/di.xml
  • app/code/KTree/Custom/Ui/DataProvider/Product/Form/Modifier/Custom.php 

Add Custom Tab to Product Form

we can add custom tabs to product form using following ways

  • Add Custom PHP Modifier
  • add Custom Product Form

2.1 Add custom PHP Modifier

To add a PHP modifier for a UI component, take the following steps:

2.1.1 Create di.xml file

  • Each module can have a global and area-specific di.xml file. Magento reads all the di.xml configuration files declared in the system and merges them all together by appending all nodes.

  • As a general rule, the area specific di.xml files should configure dependencies for the presentation layer, and your module’s global di.xml file should configure the remaining dependencies.

  • Magento loads The configuration in the following stages:

    • Initial (app/etc/di.xml)

    • Global (/etc/di.xml)

    • Area-specific (/etc//di.xml)

Declare modifier in module Di configuration app/code/KTree/Custom/etc/adminhtml/di.xml. This declaration looks like the following:
File: app/code/KTree/Custom/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="customtab" xsi:type="array">
                    <item name="class" xsi:type="string">KTree\Custom\Ui\DataProvider\Product\Form\Modifier\Custom</item>
                    <item name="sortOrder" xsi:type="number">2</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Here, Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool  is virtual class.

2.1.2 Add Custom Modifier 

  • Create Custom class in app/code/KTree/Custom/Ui/DataProvider/Product/Form/Modifier folder.
  • Custom class implements \Magento\Ui\DataProvider\Modifier\ModifierInterface interface. SO implement following methods.
    • modifyMeta(): for modifying UI component’s metadata (for example, name, label, description, type) 
    • modifyData(): for modifying UI component’s data (for example, the list of options for a select element)

File: app/code/KTree/Custom/Ui/DataProvider/Product/Form/Modifier/Custom.php
 


<?php
namespace KTree\Custom\Ui\DataProvider\Product\Form\Modifier;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Ui\Component\Form;
class Custom extends AbstractModifier
{
    /**
     * {@inheritdoc}
     */
    public function modifyData(array $data)
    {
        return $data;
    }
    /**
     * {@inheritdoc}
     */
    public function modifyMeta(array $meta)
    {
        $meta = array_replace_recursive(
            $meta,
            [
                'test' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'additionalClasses' => 'admin__fieldset-product-custom',
                                'label' => __('Custom Tab'),
                                'collapsible' => true,
                                'componentType' => Form\Fieldset::NAME,
                                'dataScope' => self::DATA_SCOPE_PRODUCT,
                                'disabled' => false,
                                'sortOrder' => $this->getNextGroupSortOrder(
                                    $meta,
                                    'search-engine-optimization',
                                    15
                                )
                            ],
                        ],
                    ],
                    'children' =>$this->getPanelChildren(),
                ],
            ]
        );
        return $meta;
    }
    protected function getPanelChildren()
    {
        return [
            'custom_tab_content' => $this->getCustomContent()
        ];
    }
    protected function getCustomContent()
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'content' => "custom tab text",
                        'formElement' => 'container',
                        'componentType' => 'container',
                        'label' => false,
                        'template' => 'ui/form/components/complex',
                    ],
                ],
            ],
            'children' => [],
        ];
    }
}
?>
  • The full source code can be downloaded from this Github link Add Custom Tab to Product Edit
  • After completion above steps, please run the "php bin/magento setup:upgrade" command and "php bin/magento setup:static-content:deploy"
  • The final output like below

2.2  Add Custom Product Form

2.2.1 Create product_form.xml  

Add product_form.xml file to app/code/KTree/Custom/view/adminhtml/ui_component/ folder and add required filedset, modals and new fileds to form field.

File: app/code/KTree/Custom/view/adminhtml/ui_component/product_form.xml


<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="mycustomtab">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">My Custom Tab</item>
            <item name="provider" xsi:type="string">product</item>
            <item name="sortOrder" xsi:type="number">150</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>
    <field name="my_custom_attribute">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="dataType" xsi:type="string">int</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="label" xsi:type="string" translate="true">My Custom Attribute</item>
            </item>
        </argument>
    </field>
</fieldset>
</form>
  • product_form.xml is merged with the same files from the other modules. So there is no need to copy their content, we  only need to define our changes in file. 
  • After completion above steps, please run the "php bin/magento cache:flush" command 
  • The final output like below

Please Contact us if you have any Magento Implementation requirements.Hire dedicated Magento developers or Magento Development services from KTree. KTree is Best offshore Magento E-commerce development company with extensive experience in E-commerce development and Magento Plugins.
KTree is one of top most Spring Development company from India which specializes in developing Microservices Application using Spring Boot and Web Applications & Mobile Apps using Spring Framework.