Magento 2.0 Moving Added Tab UI Code From Catalog Component To My Own Component

Question

I recently chanced upon a tutorial in datasheat[dot]com to add a custom tab into the Product edit/create form. I was able to make it work, but the issue I found is that the code has been added to the Magento Catalog component. Can any of you point out how I can move the added code into the component I created?

This is the code that was added (based on the tutorial):

1. Add code to magento\module-catalog\view\adminhtml\layout\catalog_product_new.xml

   <block class="Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\CustomTab" name="product_tabs.customtab" as="custom-tab">
       <arguments>
           <argument name="label" xsi:type="string" translate="true">Custom Tab</argument>
       </arguments>
   </block>
   

2. Create CustomTab.php in Magento\Catalog\Block\Adminhtml\Product\Edit\Tab

   <?php
   namespace Magento\Catalog\Block\Adminhtml\Product\Edit\Tab;
   
   class CustomTab extends \Magento\Backend\Block\Widget
   {
       protected $_template = 'catalog/product/tab/customtab.phtml';
   
       public function __construct(
           \Magento\Backend\Block\Template\Context $context,
           array $data = []
       ) {
          parent::__construct($context, $data);
         }
    }
   

3. Create file customtab.phtml in magento\module-catalog\view\adminhtml\templates\catalog\product\tab

   <fieldset class="fieldset form-inline">
       <legend class="legend"><span><?php echo __('Custom Tab') ?></span></legend>
       <br>
       <div id="table_cataloginventory">
           <div class="field">
               <label class="label" for="custom_first">
                   <span><?php  echo __('FIrst') ?></span>
               </label>
               <div class="control">
                   <input type="text" class="input-text" id="custom_first" name="first" value="first">
               </div>
           </div>
           <div class="field">
               <label class="label" for="custom_second">
                   <span><?php  echo __('Second') ?></span>
               </label>
               <div class="control">
                   <input type="text" class="input-text" id="custom_second" name="second" value="second">
               </div>
           </div>
       </div>
   </fieldset>
   

4. Add code below inside Magento\Catalog\Block\Adminhtml\Product\Edit\Tabs.php

    $ This-> AddTab (
         'Custom-tab'
         [
         'Label' => __ ( 'Custom Tab')
         'Content' => $ this -> _ translateHtml (
         $ This-> getChildHtml ( 'custom-tab')
         )
         'Group_code' => self :: BASIC_TAB_GROUP_CODE
         ]
         );
   

Answer 1

Here you can find a complete solution "How to create own module" where you can add your tab.

At addition, try to change:

$ This-> AddTab (
      'Custom-tab'
      [
      'Label' => __ ( 'Custom Tab')
      'Content' => $ this -> _ translateHtml (
      $ This-> getChildHtml ( 'custom-tab')
      )
      'Group_code' => self :: BASIC_TAB_GROUP_CODE
      ]
      );

to the:

$this->addTab(
    'Custom-tab',
    [
        'Label' => __( 'Custom Tab'),
        'Content' => $this->__translateHtml(
            $this->getChildHtml('custom-tab')
        ),
        'Group_code' => self::BASIC_TAB_GROUP_CODE
    ]
);