Custom ui_component data not being sent to controller

Question

I've created a custom ui_component to add an extra field to the product edit page, but when I click save the custom field values are not included in $this->getRequest()->getPostValue().

My code looks like this.

/etc/adminhtml/di.xml:

<?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="customProductModifier" xsi:type="array">
 <item name="class" xsi:type="string">Vendor\Module\Ui\Modifier\Product\Form\CustomProductModifier</item>
 <item name="sortOrder" xsi:type="number">1</item>
 </item>
 </argument>
 </arguments>
</virtualType>

/ui_component/product_form.xml:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <fieldset name="custom_products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Label</item>
 <item name="sortOrder" xsi:type="number">1</item>
 <item name="collapsible" xsi:type="boolean">true</item>
 </item>
 </argument>
 <field name="custom_name" formElement="input">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="formElement" xsi:type="string">checkboxset</item>
 <item name="componentType" xsi:type="string">field</item>
 <item name="visible" xsi:type="number">1</item>
 <item name="sortOrder" xsi:type="number">1</item>
 <item name="label" xsi:type="string">Label</item>
 <item name="dataScope" xsi:type="string">custom_name</item>
 </item>
 </argument>
 </field>
 </fieldset>
</form>

CustomProductModifier.php:

<?php
namespace Vendor\Module\Ui\Modifier\Product\Form;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Vendor\Module\Service\HTTPService;
class CustomProductModifier extends AbstractModifier{
public function modifyMeta(array $meta){
 $meta['custom_products'] = [
 'children' => [
 'custom_name' => [
 'arguments' => [
 'data' => [
 'config' => [
 'options' => $this->populateValues()
 ]
 ]
 ]
 ] 
 ]
 ];
 return $meta;
}
public function modifyData(array $data){
 return $data;
}
private function populateValues(){
 $values = array(
 array('value' => 'disabled', 'label' => 'Disabled'),
 );
 foreach(HTTPService::get_instance()->get_data() as $index => $data){
 $values[] = array('value' => $data['title'], 'label' => $data['title']);
 }
 return $values;
}
}

The tutorial I followed ended here but there must be something missing. I can't find the link right now, I'll update if I do.

EDIT: Well I found the link to the tutorial... http://devdocs.magento.com/guides/v2.2/howdoi/customize_product.html

EDIT 2: After further searching I came across another post where the html 'name' attribute was being set to emtpy when using uicomponents, which was causing the values to not be sent with the form data. It turned out to be a bug which was supposedly fixed in v2.2.2.

In my case the name attribute is not even being included. So instead of name="" I have no name attribute at all. Any suggestions why this is happening?

EDIT 3: Forcing the 'name' attribute by editing the checkbox-set template does not solve the problem, the data is still not sent to the controller.

• Rizwan Khan: well i dont have full idea but adding data-form-part="product_form" to your form element will post data to controller.
• GinoT: How exactly should that be done? Only way I've been able to add my own html attributes is to edit/override the checkbox-set.html template, but hardcoding 'data-form-part="product_form"' into the template is obviously not the solution.
• GinoT: Ok so adding the 'data-form-part="product_form"' and 'name' attributes manually works (thanks for the suggestion @Rizwan), but how could this be done from the uicomponent, as adding them to the checkbox-set template is not really a solution.
• GinoT: I ended up using jquery to set the missing attributes. var fixAttributes = function() { if($('fieldset[data-index="custom_name"]').length <= 0 ){ //wait for knockout js to finish rendering setTimeout(function(){ fixAttributes(); }, 3000); }else{ $('fieldset[data-index="custom_name"]').find('input').each(function(){ $(this).attr('data-form-part', 'product_form'); $(this).attr('name', 'product[custom_name][' + $(this).val() + ']'); }); } };
• Rizwan Khan: That will also works. but if my answer works it would be more better to this.

Answer 1

In Your ui_component/product_form.xml

 <fieldset name="custom_products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Label</item>
 <item name="sortOrder" xsi:type="number">1</item>
 <item name="collapsible" xsi:type="boolean">true</item>
 <!-- add here --> 
 </item>
 </argument>
 </fieldset>

Try after adding this arguments

<item name="provider" xsi:type="string">product</item>
<item name="dataScope"xsi:type="string">data.product</item>
<item name="ns" xsi:type="string">product_form</item>

That will add your field to product edit form area.

There is no form in product add in magento2.
I dont know how but data is posted using js, js finds the element with attribute data-form-part="product_form".

Thankx

• GinoT: Thanks for the suggestion but it doesn't work. If I remove my jQuery code and add yours the 'data-form-part' and the 'name' attributes are still missing. But your suggestion helped out a lot. It works if I manually add those 2 attributes.