Magento 2 - How to add,save,display custom Field in Product Edit form using UiComponent?

Question

Hi I want to add a custom field in Product add/Edit form using UiComponent and want to save its value and displayed back to form as well

I have read a couple of threads for this - but not getting the exact solution

I have added custom field using uicomponent in product_form.xml file below is the code :

<?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">   
<modal name="advanced_inventory_modal">  
     <fieldset name="manage_note">
         <argument name="data" xsi:type="array">        
             <item name="config" xsi:type="array">
                 <item name="label" xsi:type="string" translate="true">Manage Note</item>
                 <item name="dataScope" xsi:type="string"/>
                 <item name="sortOrder" xsi:type="number">0</item>
                 <item name="collapsible" xsi:type="boolean">true</item>
                 <item name="opened" xsi:type="boolean">true</item>
             </item>
         </argument>
         <field name="note">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="label" xsi:type="string" translate="true">Notes</item>
                     <item name="formElement" xsi:type="string">textarea</item>
                     <item name="dataScope" xsi:type="string">quantity_and_stock_status.note</item>
                     <item name="sortOrder" xsi:type="number">1</item>
                     <item name="scopeLabel" xsi:type="string">[GLOBAL]</item>
                 </item>
             </argument>
         </field>          
     </fieldset>
     <fieldset name="stock_data">
         <argument name="data" xsi:type="array">
             <item name="config" xsi:type="array">
                 <item name="label" xsi:type="string" translate="true">Stock Configuration</item>
                 <item name="dataScope" xsi:type="string"/>
                 <item name="sortOrder" xsi:type="number">100</item>
                 <item name="collapsible" xsi:type="boolean">true</item>
             </item>
         </argument>
     </fieldset>   
</modal>
</form>

Custom Field is added successfully, but its value is not getting saved ? due to that its value is not displayed in edit form as well.

so what is the best approach to achieve this?

Answer 1

I have resolved this issue by myself, below is the way i have resolved it.

I have created Observer which calls after product save event.

so below is the event.xml file below is the code :

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_save_after">
        <observer name="Vendor_Module::save_custom_data" instance="Vendor\Module\Observer\AfterProductSave"/>
    </event>
</config>

Below is my Observer AfterProductSave code :

<?php

namespace Vendor\ModuleName\Observer;

use Magento\Framework\Event\ObserverInterface;

class AfterProductSave implements ObserverInterface
{

    /**
     * Custom factory
     *
     * @var \Vendor\ModuleName\Model\CustomProductsFactory
     */
    protected $_CustomProductsFactory;

    /**
     * Http Request
     *
     * @var \Magento\Framework\App\Request\Http
     */
    protected $request;


    /**
     * @param \Magento\Customer\Model\ResourceModel\Group\Collection $customerGroup
     * @param \Magento\Framework\App\Request\Http $request
     * @param array $data
     */
    public function __construct(
        \Vendor\ModuleName\Model\CustomProductsFactory $customProductsFactory,
        \Magento\Framework\App\Request\Http $request,
        array $data = []
    ) {
        $this->_CustomProductsFactory = $CustomProductsFactory;
        $this->request = $request;
    }


    /**
     *
     *  @param \Magento\Framework\Event\Observer $observer
     */
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $product = $observer->getProduct();

        if ((!empty($product)))) {
            $productId = $product->getId();
            $requestId = $this->request->getParam('id');
            $productName =  $product->getName();
            $customFieldSetData = serialize($product->getCustomFieldSet());
            if ($productId) {
                $this->saveCustomProductData($requestId,$productId,$customFieldSetData);
            }
        }
    }


    public function saveCustomProductData($requestId,$productId,$customFieldSetData)
    {

        $model = $this->_CustomProductsFactory->create();

        if (empty($requestId)) {
            $data = ['custom_data'=>$customFieldSetData,'product_id'=>$productId];
        } else {
            //load model
            $model->load($productId, 'product_id');
            $data = ['custom_data'=>$customFieldSetData,'product_id'=>$productId]];
        }

        $model->addData($data);

        $model->save();
    }
}