How to save the custom tab data in the database

Question

I am working on magento 2.4 and I added a custom tab in the edit product form in the admin panel. I want to save the data of my custom tab form.

I am new to Magento and finding it hard to cop up with it. Can anyone suggest me how to achieve this task?

CompanyName\ModuleName\view\adminhtml\ui_component\product_view.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">
    <htmlContent name="custom" sortOrder="10">
        <argument name="data" xsi:type="array">
            <item name="wrapper" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Set Design Area</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
            </item>
        </argument>
        <settings>
            <wrapper>
                <canShow>true</canShow>
                <componentType>fieldset</componentType>
            </wrapper>
        </settings>
        <block name="custom.block" class="CompanyName\ModuleName\Block\Adminhtml\Product\Custom" template="CompanyName_ModuleName::product/custom.phtml"/>
    </htmlContent>
</form>

view/adminhtml/templates/custom.phtml

<h1>Set Design Area for the product customisation</h1>
<div>
    <?php //echo "<pre>"; print_r($block->getCurrentProduct());?>

    <img src ="http://127.0.0.1/supertee/pub/media/BlankProduct/forDesign.png" id="currentProductId" style="display: none">
    <form data-form-part="product_form" method="post" action="">
        <input type="hidden" name="canvasHeight" id="canvasHeight" value="1">
        <input type="hidden" name="canvasWidth" id="canvasWidth" value="2">
        <input type="hidden" name="canvasXCdnt" id="canvasXCdnt" value="3">
        <input type="hidden" name="canvasYCdnt" id="canvasYCdnt" value="4">
    </form>
</div>

CompanyName\ModuleName\Observer\Productsaveafter.php

<?php

namespace CompanyName\ModuleName\Observer;

use Magento\Framework\Event\ObserverInterface;

class Productsaveafter implements ObserverInterface
{    
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $_product = $observer->getProduct();  // you will get product object
        echo "<pre>";print_r($_product);die;
        $_sku=$_product->getSku(); // for sku

    }   
}

I see the html part but when I click on Save button on product page the form values does not get printed. Is there any other way where to do this easily? Please help

Answer 1

Well I am answering my own question, so that it can help someone.

to post the form data to the observer, one has to add

data-form-part="product_form"

to each form element.

for example:

<form data-form-part="product_form" method="post" action="">
        <input type="hidden" data-form-part="product_form" name="canvasHeight" id="canvasHeight" value="1">
        <input type="hidden" data-form-part="product_form"name="canvasWidth" id="canvasWidth" value="2">
        <input type="hidden" data-form-part="product_form" name="canvasXCdnt" id="canvasXCdnt" value="3">
        <input type="hidden" data-form-part="product_form" name="canvasYCdnt" id="canvasYCdnt" value="4">
    </form>