Adding an additional menu item to a product in Magento 2

Question

I'm creating an extension and I'm wondering how to add a new menu item to a product view next to "Content", "Configuration", "Product Reviews", "Images and Vidoes" etc.

I've been studying the code in /vendor/magento/module-catalog/view/adminhtml/layout/catalog_product_form.xml to create a catalog_product_form.xml in my module's view/adminhtml/layout directory, but the new menu item never shows.

I've added new columns to the admin product grid, and new configuration items via the system.xml file, so I think I understand how the DOM merging should work, but what am I don't wrong with this product menu item? Here's the code in my module's catalog_product_form.xml:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <referenceContainer name="product_form">
        <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery">
            <arguments>
                <argument name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">My experiment</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="string">22</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                </argument>
            </arguments>
            <block class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="parentComponent" xsi:type="string">product_form.product_form.block_gallery.block_gallery</item>
                    </argument>
                </arguments>
                <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video" template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
            </block>
        </block>
    </referenceContainer>
</layout>

Answer 1

I've found what I was looking for by studying some of the core Magento 2 code. First add a <fieldset> element to view/adminhtml/ui_component/product_form.xml:

<?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">
    <argument name="data" xsi:type="array">
        <item name="buttons" xsi:type="array">
            <item name="product_button" xsi:type="string">Vendor\Module\Block\Adminhtml\Product\Edit\Button\UploadButton</item>
        </item>
    </argument>
    <fieldset name="my_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">My New Tab</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <container name="my_group">
            <field name="my_field">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\Edit\Tab\ProfileSelect</item>
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">My test menu</item>
                        <item name="sortOrder" xsi:type="number">230</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="dataScope" xsi:type="string">value</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="source" xsi:type="string">category</item>
                    </item>
                </argument>
            </field>
        </container>
    </fieldset>
</form>

Second, create a source class to populate your field. Mine is Vendor\Module\Block\Adminhtml\Product\Edit\Tab\ProfileSelect.php.

<?php

namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab;

use Magento\Framework\Data\Form\Element\AbstractElement;

class ProfileSelect extends \Magento\Config\Block\System\Config\Form\Field implements \Magento\Framework\Option\ArrayInterface
{
    /**
    * @var \Magento\Framework\App\Config\ScopeConfigInterface
    */
    protected $_scopeConfig;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_scopeConfig = $context->getScopeConfig();
    }

    /**
    * Disables the communities if no token is present
    */
    public function _getElementHtml(AbstractElement $element)
    {
        return $element->getElementHtml();
    }

    /**
    * Return options array
    *
    * @return array
    */
    public function toOptionArray()
    {
       return [
            ['value' => 'theducksflyatmidnight', 'label' => 'theducksflyatmidnight'],
            ['value' => 'newenglandclamchowder', 'label' => 'newenglandclamchowder']
        ];
     }
}

Clear the cache and run setup:di:compile, and the new menu item containing the new field will show.