Magento 2.4.7: Creating a Custom Admin Grid from Scratch
Magento 2.4.7: Creating a Custom Admin Grid from Scratch
Learn how to create a custom admin grid from scratch in Magento 2.4.7. This step-by-step guide covers everything from module setup, routing, and UI components to building a custom data provider. Perfect for developers looking to display and manage custom data in the Magento admin panel.
Customizing Magento 2 Admin Grids with UI Components and Data Providers
Magento 2 offers flexible tools for tailoring admin grids to specific needs. By leveraging UI components and custom data providers, developers can efficiently manage and display data in the admin panel.
1. Module Setup
Registration File: Create registration.php in your module's root directory to register the module.
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_AdminGrid', __DIR__);
Module Configuration: Define module.xml in etc to declare the module and its dependencies.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_AdminGrid" setup_version="1.0.0">
<sequence>
<module name="Magento_Backend"/>
<module name="Magento_Ui"/>
</sequence>
</module>
</config>
Enable Module: Run the following command to enable the module:
php bin/magento setup:upgrade
2. Admin Menu and Access Control
Menu Configuration: Add menu.xml in etc/adminhtml to create a new menu item.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add
id="Vendor_AdminGrid::main_menu"
title="Custom Grid"
module="Vendor_AdminGrid"
sortOrder="10"
resource="Vendor_AdminGrid::main_menu"/>
</menu>
</config>
Access Control List (ACL): Define acl.xml in etc to manage permissions.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
<resources>
<resource id="Magento_Backend::admin">
<resource
id="Vendor_AdminGrid::main_menu"
title="Custom Grid"
sortOrder="10"/>
</resource>
</resources>
</acl>
</config>
3. Routing and Controller
Routing: Create routes.xml in etc/adminhtml to define the admin route.
<?php
namespace Vendor\AdminGrid\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(Action\Context $context, PageFactory $resultPageFactory)
{
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('Vendor_AdminGrid::main_menu');
$resultPage->getConfig()->getTitle()->prepend(__('Custom Grid'));
return $resultPage;
}
}
4. UI Component and Data Provider
Layout File: Define the layout in view/adminhtml/layout/customgrid_index_index.xml to include the UI component.
<?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="custom_grid_listing"/>
</referenceContainer>
</body>
</page>
UI Component Configuration: Create custom_grid_listing.xml in view/adminhtml/ui_component to define the grid structure.
<?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">custom_grid_listing.custom_grid_listing_data_source</item>
<item name="deps" xsi:type="string">custom_grid_listing.custom_grid_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">custom_grid_columns</item>
</argument>
<dataSource name="custom_grid_listing_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<storageConfig>
<param name="indexField" xsi:type="string">entity_id</param>
</storageConfig>
<updateUrl path="mui/index/render"/>
</settings>
<aclResource>Vendor_AdminGrid::main_menu</aclResource>
<dataProvider class="Vendor\AdminGrid\Ui\Component\DataProvider\CustomDataProvider"
name="custom_grid_listing_data_source">
<settings>
<requestFieldName>entity_id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<columns name="custom_grid_columns">
<column name="entity_id">
<settings>
<label translate="true">ID</label>
<sortable>true</sortable>
</settings>
</column>
</columns>
</listing>
Implementing these practices ensures your Magento 2 store operates efficiently, providing a better experience for your users.
Tip
To enhance your eCommerce store’s performance with Magento, focus on optimizing site speed by utilizing Emmo themes and extensions. These tools are designed for efficiency, ensuring your website loads quickly and provides a smooth user experience. Start leveraging Emmo's powerful solutions today to boost customer satisfaction and drive sales!
FAQs
What is a custom admin grid in Magento 2.4.7?
A custom admin grid is a backend table view created by developers to display specific data in Magento's admin panel using UI components and data providers.
Why would I create a custom admin grid in Magento 2.4.7?
Custom admin grids are useful for managing custom entities, improving data visibility, and enabling admin users to view, filter, and interact with specific datasets more effectively.
What are the basic steps to build a custom admin grid in Magento 2.4.7?
Key steps include creating the module structure, defining routes and controllers, adding menu items, setting up ACL permissions, configuring layout and UI components, and building a data provider.
Which UI component is used for admin grids in Magento 2.4.7?
The listing UI component is used to build dynamic, configurable admin grids using XML configuration files and data providers.
How do I connect a data provider to a custom grid?
You connect it by defining a class in the UI component’s dataSource configuration and implementing custom logic to load and filter data from your model or collection.
Can I add mass actions or filters to my custom admin grid?
Yes, Magento 2.4.7 supports mass actions, filters, and sort options within admin grids using declarative XML and PHP logic in the UI component.
Is it possible to use a custom collection in the data provider?
Absolutely. You can define your own collection class and bind it to the data provider to display custom entity data in the grid.
Do I need to define access control for my custom grid?
Yes, defining ACL rules ensures that only users with appropriate permissions can access the grid, maintaining security and access control.
Where is the layout for a custom admin grid defined?
The layout is defined in a file such as customgrid_index_index.xml in the view/adminhtml/layout directory, referencing your UI component name.
Can I extend or customize Magento’s default admin grids?
Yes, Magento allows you to extend existing grids or create new ones from scratch, giving you full control over the admin UI and data management.
