Our Work
200+ Enterprises across globally trust KTree for their Web & Mobile application Development needs.See What We Do
Updated today
Here we will see how to add new custom tab on product edit page in magento2.
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
we can add custom tabs to product form using following ways
To add a PHP modifier for a UI component, take the following steps:
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.
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' => [],
];
}
}
?>
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>
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