Magento 2: UiComponent using tabs fields are empty
-
15-04-2021 - |
Question
I am using uicomponent to create form, all fields display data if I am not using tabs,
But after using tabs every field is empty
<?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="js_config" xsi:type="array">
<item name="provider" xsi:type="string">vtn_investment_edit.vtn_investment_listing_data_source</item>
<item name="deps" xsi:type="string">vtn_investment_edit.vtn_investment_listing_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Investment Information</item>
<item name="reverseMetadataMerge" xsi:type="boolean">true</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">vtn_investment_req</item>
</item>
</argument>
<settings>
<buttons>
<button name="back" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\BackButton"/>
<button name="delete" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\DeleteButton"/>
<button name="reset" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\ResetButton"/>
<button name="save" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\SaveButton"/>
</buttons>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
<deps>
<dep>vtn_investment_edit.vtn_investment_listing_data_source</dep>
</deps>
</settings>
<dataSource name="vtn_investment_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vtn\Investment\Model\Investment\DataProvider</argument>
<argument name="name" xsi:type="string">vtn_investment_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="investment/vtn/save" />
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="post">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Investment Form</item>
</item>
</argument>
<field name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="active">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">3000</item>
<item name="dataType" xsi:type="string">boolean</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">post</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="label" xsi:type="string" translate="true">Active</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="string">1</item>
<item name="false" xsi:type="string">0</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
<item name="default" xsi:type="string">0</item>
</item>
</argument>
</field>
<field name="customer_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Email</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_contact">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Contact</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="sku">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Sku</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="investment_amount">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Investment Amount</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="comment">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
</fieldset>
<fieldset name="docs">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Documents</item>
</item>
</argument>
<field name="customer_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="file_path">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="file_path_second">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="file_path_third">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
</fieldset>
</form>
DataProvider.php
<?php
namespace Vtn\Investment\Model\Investment;
use Vtn\Investment\Model\ResourceModel\Investment\CollectionFactory;
use Vtn\Investment\Model\Investment;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @var Vtn\Investment\Model\ResourceModel\Investment\CollectionFactory $collection
*/
protected $collection;
protected $_loadedData;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $contactCollectionFactory,
array $meta = [],
array $data = []
){
$this->collection = $contactCollectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
if(isset($this->_loadedData)) {
return $this->_loadedData;
}
$items = $this->collection->getItems();
foreach($items as $contact)
{
$this->_loadedData[$contact->getId()] = $contact->getData();
}
return $this->_loadedData;
}
}
Solution
For using tabs we have to define fieldset name like I have this name <fieldset name="post">
& for another fieldset I am using this name <fieldset name="docs">
So, within foreach instead of using this:
$this->_loadedData[$contact->getId()] = $contact->getData();
Have to define the fieldset name
$this->_loadedData[$contact->getId()]['post'] = $contact->getData();
$this->_loadedData[$contact->getId()]['post'] = $contact->getData();
So this is how it works
public function getData()
{
if(isset($this->_loadedData)) {
return $this->_loadedData;
}
$items = $this->collection->getItems();
foreach($items as $contact)
{
$this->_loadedData[$contact->getId()]['post'] = $contact->getData();
$this->_loadedData[$contact->getId()]['docs'] = $contact->getData();
}
return $this->_loadedData;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange