Introduction

When I deployed a Blog module in a Magento 2 Shop, I was wondering why It didn’t populated all the shown fields in the corresponding backend Admin View. Namely the Created At, Modified At and the Custom Date field were showing blank values, despite having valid values in the database.

The UI Component fields in the Admin View are indeed missing

Short side note: The Custom Date Field was added manually as the name may be imply – See here for a how-to. But now back to the topic:

This article will present a summary of a successful method to bring back the correct values to the empty UI Component Fields.

Looking for Bugs and Mistakes

The first place where to look for the issue is the place where the actual fields are defined. Namely the responsible XML File. In my case that is: /app/code/EeroKaan/Blog/view/adminhtml/ui_component/post_listing.xml

<dataSource name="post_listing_data_source">
	<argument name="dataProvider" xsi:type="configurableObject">
		<argument name="class" xsi:type="string">PostGridDataProvider</argument>
		<argument name="name" xsi:type="string">post_listing_data_source</argument>
		<argument name="primaryFieldName" xsi:type="string">post_id</argument>
		<argument name="requestFieldName" xsi:type="string">post_id</argument>
		<argument name="data" xsi:type="array">
			<item name="config" xsi:type="array">
				<item name="update_url" xsi:type="url" path="mui/index/render"/>
			</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/grid/provider</item>
		</item>
	</argument>
</dataSource>
post_listing.xml | Lines 18-35
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
	<argument name="data" xsi:type="array">
		<item name="config" xsi:type="array">
			<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
			<item name="filter" xsi:type="string">dateRange</item>
			<item name="visible" xsi:type="boolean">true</item>
			<item name="dataType" xsi:type="string">date</item>
			<item name="dateFormat" xsi:type="string">yyyy-MM-dd HH:mm:ss</item>
			<item name="label" xsi:type="string" translate="true">Created At</item>
			<item name="sortOrder" xsi:type="number">120</item>
		</item>
	</argument>
</column>
<column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
	<argument name="data" xsi:type="array">
		<item name="config" xsi:type="array">
			<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
			<item name="filter" xsi:type="string">dateRange</item>
			<item name="visible" xsi:type="boolean">true</item>
			<item name="dataType" xsi:type="string">date</item>
			<item name="dateFormat" xsi:type="string">yyyy-MM-dd HH:mm:ss</item>
			<item name="label" xsi:type="string" translate="true">Updated At</item>
			<item name="sortOrder" xsi:type="number">130</item>
		</item>
	</argument>
</column>
<column name="eero_custom_date" class="Magento\Ui\Component\Listing\Columns\Date">
	<argument name="data" xsi:type="array">
		<item name="config" xsi:type="array">
			<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
			<item name="filter" xsi:type="string">dateRange</item>
			<item name="visible" xsi:type="boolean">true</item>
			<item name="dataType" xsi:type="string">date</item>
			<item name="dateFormat" xsi:type="string">yyyy-MM-dd HH:mm:ss</item>
			<item name="label" xsi:type="string" translate="true">Custom Date</item>
			<item name="sortOrder" xsi:type="number">140</item>
		</item>
	</argument>
</column>
post_listing.xml | Lines 339-377

In Line 20 you can see the DataProvider class PostGridDataProvider being defined. Following the rabbit-hole the /app/code/EeroKaan/Blog/etc/di.xml File tells us, what the PostGridDataProvider class actually is:

<virtualType name="PostGridDataProvider" type="EeroKaan\Blog\Ui\DataProvider\Post\PostDataProvider">
	<arguments>
		<argument name="collection" xsi:type="object" shared="false">EeroKaan\Blog\Model\Resource\Post\Collection</argument>
		<argument name="filterPool" xsi:type="object" shared="false">PostGirdFilterPool</argument>
	</arguments>
</virtualType>
di.xml | Lines 60-65

Line 60 links the PostGridDataProvider to the EeroKaan\Blog\Ui\DataProvider\Post\PostDataProvider class. Inside of the PostDataProvider class under the /app/code/EeroKaan/Blog/Ui/DataProvider/Post/PostDataProvider.php path, we can see a certain getData() Method. By inserting a print_r( $items ) after the initialisation of the collection we can output the collection array itself.

public function getData() {
    if (!$this->getCollection()->isLoaded()) {
        $this->getCollection()->load();
    }
    $items = $this->getCollection()->toArray();

    print_r( $items );

    return [
        'totalRecords' => $this->getCollection()->getSize(),
        'items' => array_values($items['items']),
    ];
}
Inserting a print_r() to output valuable debug Information
[items] => Array
    (
        [0] => Array
            (
                [post_id] => 1
                [title] => Lorem Ipsum A B C
                [url_key] => lorem-ipsum-a-b-c
                [thumbnail] => blog/t/e/test-576x432_1.jpg
                [image] => blog/t/e/test-576x432_3.jpg
                [short_content] => <p>This is the Short Content Text</p>
                [content] => <p><img src="{{media url="blog/eero-test-image-01.jpg"}}" width="1920" height="1080"></p>
                [meta_keywords] => 
                [meta_description] => 
                [tags] => Test, Article, EeroLorem, Ipsum
                [user] => Eero
                [updated_by_user] => Eero
                [status] => 1
                [_first_store_id] => 1
                [store_code] => eero_kaan_shop
                [store_id] => Array
                    (
                        [0] => 0
                    )
The Resulting Collection Array Output

As you can see from the data the array holds, the Admin view doesn’t have any chance to display the requested data, since it’s not present. The fields created_at, updated_at and eero_custom_date are missing. To add them to the array anyways we can now proceed with the actual solution.

Fix the Code in the Right Place

To add the missing fields to the collection, we utilize the simple addField() Method in the Class Constructor like so:

public function __construct(
    $name,
    $primaryFieldName,
    $requestFieldName,
    CollectionFactory $collectionFactory,
    array $addFieldStrategies = [],
    array $addFilterStrategies = [],
    array $meta = [],
    array $data = []
)
{
    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    $this->collection = $collectionFactory->create();
    $this->addFieldStrategies = $addFieldStrategies;
    $this->addFilterStrategies = $addFilterStrategies;

    $this->addField("created_at");
    $this->addField("updated_at");
    $this->addField("eero_custom_date");
}
Adding the needed fields in the Constructor

Then checking again with the print_r() Method:

[items] => Array
    (
        [0] => Array
            (
                [created_at] => 2019-08-17 20:20:08
                [updated_at] => 2020-03-03 12:02:02
                [eero_custom_date] => 2020-02-10 01:00:00
                [post_id] => 1
                [title] => Lorem Ipsum A B C
                [url_key] => lorem-ipsum-a-b-c
                [thumbnail] => blog/t/e/test-576x432_1.jpg
                [image] => blog/t/e/test-576x432_3.jpg
                [short_content] => <p>This is the Short Content Text</p>
                [content] => <p><img src="{{media url="blog/eero-test-image-01.jpg"}}" width="1920" height="1080"></p>
                [meta_keywords] => 
                [meta_description] => 
                [tags] => Test, Article, EeroLorem, Ipsum
                [user] => Eero
                [updated_by_user] => Eero
                [status] => 1
                [_first_store_id] => 1
                [store_code] => eero_kaan_shop
                [store_id] => Array
                    (
                        [0] => 0
                    )
The necessary fields are now present

Since the necessary fields are now present, the Admin UI Component is now able to display our field values:

And there you have it: Thats how I was able to finally implement the missing values in my Magento 2 Admin View. Hopefully this way is also applicable to your case.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like