Skip to content

Magento admin ui grid not loading

I am trying to create an admin grid module which loads custom data. I have created the small module to test the feature. However, the grid is not loading. Below is the code.

Controller:

app/code/Itm/Reports/Controller/Adminhtml/Platform/DriveScores.php

<?php

declare(strict_types=1);

namespace ItmReportsControllerAdminhtmlPlatform;

use MagentoBackendAppAction;
use MagentoBackendAppActionContext;
use MagentoFrameworkViewResultPage;
use MagentoFrameworkViewResultPageFactory;
use MagentoFrameworkAppActionHttpGetActionInterface;


class DriveScores extends Action implements HttpGetActionInterface
{
    public function __construct(
        Context $context,
        private readonly PageFactory $pageFactory
    ) {
        parent::__construct($context);
    }

    public function execute(): Page
    {
        $resultPage = $this->initAction();
        $resultPage->getConfig()->getTitle()->prepend(__('Drive Scores'));
        return $resultPage;
    }

    private function initAction(): Page
    {
        $resultPage = $this->pageFactory->create();
            $resultPage->setActiveMenu('Itm_Reports::drive_scores');
        $resultPage->addBreadcrumb(__('Reports'), __('Reports'));
        $resultPage->addBreadcrumb(__('Drive Scores'), __('Drive Scores'));
        return $resultPage;
    }
}

app/code/Itm/Reports/etc/di.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory">
            <arguments>
                <argument name="collections" xsi:type="array">
                    <item name="reports_platform_drivescores_data_source" xsi:type="string">ItmReportsUiComponentDataProviderDriveScores</item>
                </argument>
            </arguments>
        </type>
    </config>

Custom DataProvider

app/code/Itm/Reports/Ui/Component/DataProvider/DriveScores.php

    <?php
    
    declare(strict_types=1);
    
    namespace ItmReportsUiComponentDataProvider;
    
    use MagentoFrameworkViewElementUiComponentDataProviderDataProvider;
    
    class DriveScores extends DataProvider
    {
        // Implement the required methods
        public function getData()
        {
            return [
                'totalRecords' => 3,
                'items' => [
                    ['id' => 1, 'name' => 'John Doe', 'score' => 100],
                    ['id' => 2, 'name' => 'Jane Doe', 'score' => 200],
                    ['id' => 3, 'name' => 'John Smith', 'score' => 300],
                ],
            ];
        }
    }

Layout:

app/code/Itm/Reports/view/adminhtml/layout/itm_reports_platform_drivescores.xml

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <uiComponent name="reports_platform_drivescores"/>
            </referenceContainer>
        </body>
    </page>

app/code/Itm/Reports/view/adminhtml/ui_component/reports_platform_drivescores.xml

<?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">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">reports_platform_drivescores.reports_platform_drivescores_data_source</item>
            <item name="deps" xsi:type="string">reports_platform_drivescores.reports_platform_drivescores_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">reports_platform_drivescores_columns</item>
    </argument>
    <dataSource name="reports_platform_drivescores_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">ItmReportsUiComponentDataProviderDriveScores</argument>
            <argument name="name" xsi:type="string">reports_platform_drivescores_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">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 name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">entity_id</item>
                    </item>
                </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>
    <columns name="reports_platform_drivescores_columns">
            <selectionsColumn name="ids">
                <settings>
                    <indexField>id</indexField>
                </settings>
            </selectionsColumn>
            <column name="id">
                <settings>
                    <filter>textRange</filter>
                    <label translate="true">ID</label>
                </settings>
            </column>
            <column name="name">
                <settings>
                    <filter>text</filter>
                    <label translate="true">Store ID</label>
                </settings>
            </column>
            <column name="score">
                <settings>
                    <filter>text</filter>
                    <label translate="true">Drive Score</label>
                </settings>
            </column>
    </columns>
</listing>

Can someone point the mistake. I can see the grid layout is not rendered for sure.