As we know UI components plays pivot role in Magento. Most of the layout in admin are built with UI components and we often need to customise these ui components. Today we will demonstrate how we can add new tab with field in product form using modifiers.

1. At first Create registration.php and module.xml to register a module.

<?php

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

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="WebbyTroops_Catalog" setup_version="1.0.0">
         <sequence>
              <module name="Magento_Catalog"/>
         </sequence>
    </module>
</config>

Now we need to create di.xml file inside etc/adminthml folder

<?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="free_shipping" xsi:type="array">
                    <item name="class" xsi:type="string">WebbyTroops\Catalog\Ui\DataProvider\Modifiers\FreeShipping</item>
                    <item name="sortOrder" xsi:type="number">110</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Create FreeShipping.php inside WebbyTroops\Catalog\Ui\DataProvider\Modifiers.

<?php

namespace WebbyTroops\Catalog\Ui\DataProvider\Modifiers;

use Magento\Framework\Phrase;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Fieldset;
use Magento\Ui\Component\Form\Element\Checkbox;

/**
 * Class for Free Shipping Bar
 *
 * @api
 *
 * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
 * @since 101.0.0
 */
class FreeShipping implements \Magento\Ui\DataProvider\Modifier\ModifierInterface
{


    /**
     * @inheritdoc
     *
     * @since 101.0.0
     */
    public function modifyMeta(array $meta)
    {

       $meta = array_replace_recursive(
                $meta,
                [
                    'free_shipping' => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'label' => __('Free Shipping Configuration'),
                                    'collapsible' => true,
                                    'dataScope' => '',
                                    'componentType' => Fieldset::NAME,
                                    'sortOrder' => 100
                                ],
                            ],
                        ],
                        'children' => $this->getFields()
                    ],
                ]
        );
        
        return $meta;
    }

    /**
     * @inheritdoc
     *
     * @since 101.0.0
     */
    public function modifyData(array $data)
    {
        return $data;
    }
    
    protected function getFields()
    {
        return [
            'is_freeshipping'    => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label'         => __('Enable Free Shipping'),
                            'componentType' => Checkbox::NAME,
                            'dataScope'     => 'is_freeshipping',
                            'dataType'      => 'boolean',
                            'sortOrder'     => 10,
                            'valueMap' => [
                                'false' => 0,
                                'true' => 1
                            ],
                            'prefer' => 'toggle',
                            'default' => 0,
                            'switcherConfig' => [
                                'enabled' => true,
                                'rules' => [
                                    [
                                        'value' => 0,
                                        'actions' => [
                                            [
                                                'target' => 'product_form.product_form.'
                                                . 'free_shipping.freeshipping_amount',
                                                'callback' => 'hide'
                                            ]
                                        ]
                                    ],
                                    [
                                        'value' => 1,
                                        'actions' => [
                                            [
                                                'target' => 'product_form.product_form.'
                                                . 'free_shipping.freeshipping_amount',
                                                'callback' => 'show'
                                            ]
                                        ]
                                    ]
                                ]
                            ]
                            
                        ],
                    ],
                ],
            ],
            'freeshipping_amount' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label'         => __('Free Shipping Amount'),
                            'componentType' => Field::NAME,
                            'formElement'   => Input::NAME,
                            'dataScope'     => 'freeshipping_amount',
                            'dataType'      => Text::NAME,
                            'sortOrder'     => 20
                        ],
                    ],
                ],
            ]
        ];
    }
}

After this step you will be able to see a new tab in product form and it will look like below.

Here you can see we have two fields one to enable the free shipping and another one is for free shipping amount. Free shipping amount field is dependent field as if Enable free shipping is disable then it will not show amount field. So this will teach you how you can create fields with dependency as we often need this.

Please put your comments in below for any questions. Happy Coding !!