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

magento2magento2.3.2ui-formui-grid

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.

Best Answer

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

Related Topic