Magento 2 Show customer attribute in ui_component form

Question

I've created ui_component form where I need to show customer details, same as Customer Edit.

But, I am able to show their data from customer_entity table.

DataProvider.php

public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }
    
    // {Vendor}\{Module}\Model\GridFactory 
    // Returns Customer Resource Model
    $items = $this->gridFactory->create()->getCollection();
    
   $items->getSelect()->join('customer_entity_text as second', 'main_table.entity_id = second.entity_id');
    //print_r($items->getData()); exit;
    foreach($items as $contact){
        $this->loadedData[$contact->getEntityId()]['contact'] = $contact->getData();
    }
    
    return $this->loadedData;
}

I've joined customer_entity_text table with my Factory in order to display status (Customer Attribute).

Now My Second attribute is file type. It's in customer_entity_varchar, Firstly I thought of adding another join but I think it's not the good way.

So, Is there any solution for this? I need to display both Customer Attributes in my form.

ui_component

<field name="value">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Status</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">contact</item>
            </item>
        </argument>
    </field>

1). Above component is working good for Status but not for Profile Image that is Image type.

<field name="value">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Profile Image</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="path_controller"/>
                </item>
            </item>
        </argument>
    </field>

Even if I remove one field with same name form element it doesn't seem to be working.

Take a look at field name that is value for Status.

If I use the same thing for image field then image component disappears.

Note: I've no idea why Magento doesn't allow to use the name as value.

Cause I've joined in the collection so i am getting value as the array key.

**Question: How can I get customer attributes in this form without join in the collection ?

Also if you have other solution then most welcome.**

Answer 1

In DataProvider.php to change

From

public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }
    
    // {Vendor}\{Module}\Model\GridFactory 
    // Returns Customer Resource Model
    $items = $this->gridFactory->create()->getCollection();
    
   $items->getSelect()->join('customer_entity_text as second', 'main_table.entity_id = second.entity_id');
    //print_r($items->getData()); exit;
    foreach($items as $contact){
        $this->loadedData[$contact->getEntityId()]['contact'] = $contact->getData();
    }
    
    return $this->loadedData;
}

To

public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }
    
    // {Vendor}\{Module}\Model\GridFactory 
    // Returns Customer Resource Model
    $items = $this->gridFactory->create()->getCollection();
    
   $items->joinAttribute(
            'status',
            'customer/status',
            '',
            null,
            'left'
        );
   $items->joinAttribute(
            'profile_image',
            'customer/profile_image',
            '',
            null,
            'left'
        );
    foreach($items as $contact){
        $this->loadedData[$contact->getEntityId()]['contact'] = $contact->getData();
    }
    
    return $this->loadedData;
}

Answer 2

You need to create your custom table with the relationship of customer_entity table using setup script as follows:

$relationalTable = 'custom_table';  
$table = $setup->getConnection()
    ->newTable($setup->getTable($relationalTable))
    // --- Add your other columns here ---
    ->addColumn('customer_id', Table::TYPE_INTEGER, 10, ['nullable' => false, 'unsigned' => true],
            'Customer Id')
    ->addForeignKey(
        $setup->getFkName(
            $relationalTable,           // priTableName
            'customer_id',              // priColumnName
            'customer_entity',          // refTableName
            'entity_id'                 // refColumnName
        ),
        'customer_id',                  // column
        $setup->getTable('customer_entity'),    
        'entity_id',                    // refColumn
        Table::ACTION_CASCADE           // onDelete
    )
    ->setComment('Customer relation table');

$setup->getConnection()->createTable($table);

Then you need to load customer model and join your custom table in getData() function of DataProvider.php as follows:

protected $_customerModel;

public function __construct(
    \Magento\Customer\Model\CustomerFactory $customerModel
) {
    $this->_customerModel = $customerModel;
}

public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }

   $customer = $this->_customerModel->create();
    $collection = $customer->getCollection();
    $collection->getSelect()->join(
        ['custom' => $this->_resource->getTableName('custom_table')],
        'e.entity_id = custom.customer_id'
    );

    foreach($collection as $item){
        $this->loadedData[$item->getId()]['contact'] = $item->getData();
        // Using $item->getData(), you can get customer object with custom attributes as $item->getStatus() or $item->getProfileImage()
    }

    return $this->loadedData;
}

Now you can use field names in ui_component as follows:

<field name="status"> <!-- your custom attribute code as field name -->
...
</field>

<field name="profile_image"> <!-- your custom attribute code as field name -->
...
</field>

Hope this solution may resolve your issue.