Magento 2: How to display Customer Name instead of Customer Id in UI Component Form Field?

Question

In Magento 2.3.2, I have created a grid and form to add and edit.

In the grid column, I am able to display Customer Name instead of Customer Id with following code.

 <column name="customer_id" class="Meetanshi\HelloWorld\Ui\Component\Listing\Columns\Customername">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">text</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="label" xsi:type="string" translate="true">Posted By Customer</item>
 <item name="sortOrder" xsi:type="number">20</item>
 </item>
 </argument>
 </column>

But I don’t know the way to display Customer Name instead of Customer Id in UI Component Form Field.

I have done following code to display Customer Id field in UI Component Form.

 <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 name="disabled" xsi:type="boolean">true</item>
 <item name="sortOrder" xsi:type="number">33</item>
 </item>
 </argument>
 </field>

Also I am facing problem while filtering data with Customer Name in grid. I am able to filter data with Customer Id but not with Customer Name.

• Waqar Ali: from where you are getting this Customer_id??
• Sagar Vasani: customer_id is available in our custom table. So based on that we want to display customer name.

Answer 1

Create a file

Vendor\ModuleName\Model\DataProvider.php

use \Vendor\ModuleName\Model\ResourceModel\ModuleName\CollectionFactory;
/**
 * Class DataProvider
 */
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
 /**
 * @var Array
 */
 protected $_loadedData;
 /**
 * @param string $name
 * @param string $primaryFieldName
 * @param string $requestFieldName
 * @param CollectionFactory $sliderCollectionFactory
 * @param array $meta
 * @param array $data
 */
 public function __construct(
 $name,
 $primaryFieldName,
 $requestFieldName,
 \Magento\Customer\Model\CustomerFactory $customerfactory,
 CollectionFactory $customCollectionFactory,
 array $meta = [],
 array $data = []
 ) {
 $this->customerfactory = $customerfactory;
 $this->collection = $customCollectionFactory->create();
 parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
 }
 /** Get All Loaded Data
 * @return loadedData
 */
 public function getData()
 {
 if (isset($this->_loadedData)) {
 return $this->_loadedData;
 }
 $acustomerModel = $this->customerfactory->create();
 $items = $this->collection->getItems();
 foreach ($items as $item) {
 $data = $customerModel->load($item->getCustomerId());
 $this->_loadedData['customer_name'] = $data->getFirstName().' '.$data->getLastName();
 }
 return $this->_loadedData;
 }
}

Now in your UiComponent Grid Add this Column

<column name="customer_name" >
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">text</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="label" xsi:type="string" translate="true">Posted By Customer</item>
 <item name="sortOrder" xsi:type="number">20</item>
 </item>
 </argument>
 </column>

Hope this will Help you

• Sagar Vasani: With the above solution, I will get Customer Name column in grid. But how can I get Customer Name in edit form on the bases of Customer Id?
• Waqar Ali: see the getData() function in dataProvider you will get answer
• Waqar Ali: what i actually did is i get column customer_id from you collection foreach customer_id i got Full name from customer collection and returned customer_name loaded data to grid