Our Work

Add Custom Tab to Product Edit in Magento 2

Updated today

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

Looking for Magento Developer?

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.

Request For Quote