Magento 2 - Displaying Data on backend customer grid

Question

I need help with this line of code.

public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as & $item) {
            $item[$this->getData('name')];//Value which you want to display
        }
    }
    return $dataSource;
}

XML is,

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="customer_columns">
        <column name="updated_at" class="Mvn\Cam\Ui\Component\Listing\Column\ReferralColumn">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Updated At</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Error on Magento admin,

Notice: Undefined index: updated_at in C:\xampp\htdocs\Buyani\app\code\Mvn\Cam\Ui\Component\Listing\Column\ReferralColumn.php on line 31

I just want to display the updated_at column from the database to the customer grid at Magento admin.

Answer 1

You can follow these steps to display updated_at column in your customer's grid.

Create customer_listing.xml file here in your custom module

app/code/Vendor/Module/view/adminhtml/ui_component/customer_listing.xml

Content for this file is

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
        <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date" sortOrder="100">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Updated At</item>
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="sortOrder" xsi:type="number">100</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Create di.xml file here in your custom module

app/code/Vendor/Module/etc/di.xml

Content for this file is...

<?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\Customer\Model\ResourceModel\Grid\Collection" type="Vendor\Module\Ui\Component\Listing\CustomerDataProvider">
        <arguments>
            <argument name="mainTable" xsi:type="string">customer_grid_flat</argument>
            <argument name="resourceModel" xsi:type="string">Magento\Customer\Model\ResourceModel\Customer</argument>
        </arguments>
    </virtualType>
</config>

Now you need to create one CustomerDataProvider UI component file here

app/code/Vendor/Module/Ui/Component/Listing/CustomerDataProvider.php

Content for this file is...

<?php

namespace Vendor\Module\Ui\Component\Listing;

class CustomerDataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult
{
   protected function _initSelect()
   {
      parent::_initSelect();
      $this->getSelect()->joinLeft(
        ['ce' => $this->getTable('customer_entity')],
        'main_table.entity_id = ce.entity_id',
        ['updated_at']
      );
      return $this;
  }
}

That's it.

Hope this will work for you!

Answer 2

your question is a bit unclear but could you mean that you would like to show a custom date format (maybe from another table or collection) in your grid column?

If so, you are nearly there.

Since your column name is "updated_at", if you would do a var_dump of $this->getData('name'), you would see the "updated_at" there. Now that is your column and this perpareDataSource simply "iterates" through the given collection which contains your customers or whatever collection you are using. So your xml is fine but your prepareDataSource function could be like so:

public function prepareDataSource(array $dataSource)
{
  if (isset($dataSource['data']['items'])) {
    foreach ($dataSource['data']['items'] as & $item) {
      $name = $this->getData('name'); // this is the column name 'updated_at'
      if(isset($item['customer_id']) {
          // use the custom or customer model you introduced in your construct method
          $myCustomerModel->create();
          // load your customer or custom model or filter it if you like
          $myCustomerModel->loadById($item['customer_id']); // or filterByAttribute, etc etc
          $getTheDate = $myCustomerModel->getUpdatedAt();
          // maybe a quick var_dump + die() here to see what is coming in?
          // use your HelperData file introduced in your construct to do some nice stuff here:
          $prettyDate = $this->$myHelperData->cleanupDate($getTheDate);
          // and now you can actually fill your custom column updated_at with the value!
          $item[$name] = $prettyDate;  
        }      
     }
  }
  return $dataSource;
}

In the above I assume that your dataSource contains a field "customer_id" but it could be any field in that collection. Maybe it is entity_id or my_customer_id or email address.

good luck!