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.