Magento 2 provide a powerful way to display and manage data in a tabular
format. UI components in Magento 2 offer a flexible and efficient way to build
these grids. This guide provides a comprehensive, step-by-step approach to
setting up an admin grid using UI components in Magento 2 with the example FAQ
grid. Please follow the article to create a simple module with admin menu, We
will use AffinityReader as the vendor name and cover all
essential aspects, including module setup, routes, controllers, UI components,
and database schema.
1. Module Setup
Begin by setting up your custom module. For this example, we will name the
module AffinityReader_Faq.
Step 1: Create registration.php
Create the file app/code/AffinityReader/Faq/registration.php.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'AffinityReader_Faq',
__DIR__
);Step 2: Create module.xml
Create the file app/code/AffinityReader/Faq/etc/module.xml.
<?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="AffinityReader_Faq" setup_version="1.0.0"/>
</config>Step 3: Enable the Module
Run the following commands to enable the module and update the Magento database schema.
php bin/magento setup:upgrade
php bin/magento setup:di:compile2. Define Routes
Define routes to access the FAQ grid in the Magento admin panel.
Step 1: Create routes.xml
Create the file
app/code/AffinityReader/Faq/etc/adminhtml/routes.xml.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="affinityreader_faq" frontName="affinityreader_faq">
<module name="AffinityReader_Faq"/>
</route>
</router>
</config>3. Create the Controller
Controllers handle incoming requests and responses. We will create a controller to display the FAQ grid.
Step 1: Create the Controller File
Create the file
app/code/AffinityReader/Faq/Controller/Adminhtml/Index/Index.php.
<?php
namespace AffinityReader\Faq\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
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('AffinityReader_Faq::menu_identifier');
$resultPage->getConfig()->getTitle()->prepend(__('FAQ Management'));
return $resultPage;
}
}4. Configure the UI Component
The UI component configuration defines the columns, data source, and data provider for the FAQ grid.
Step 1: Create ui_component XML File
Create the file
app/code/AffinityReader/Faq/view/adminhtml/ui_component/affinityreader_faq_grid.xml.
<?xml version="1.0"?>
<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">affinityreader_faq.affinityreader_faq_data_source</item>
<item name="deps" xsi:type="string">affinityreader_faq.affinityreader_faq_data_source</item>
</item>
<item name="spinner" xsi:type="string">affinityreader_faq_columns</item>
</argument>
<dataSource name="affinityreader_faq_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">AffinityReader\Faq\Ui\DataProvider\Faq</argument>
<argument name="name" xsi:type="string">affinityreader_faq_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="collection" xsi:type="object">AffinityReader\Faq\Model\ResourceModel\Faq\Collection</argument>
</argument>
</dataSource>
<columns name="affinityreader_faq_columns">
<selectionsColumn name="ids">
<settings>
<indexField>entity_id</indexField>
</settings>
</selectionsColumn>
<column name="entity_id">
<settings>
<filter>textRange</filter>
<sorting>asc</sorting>
<label translate="true">ID</label>
</settings>
</column>
<column name="question">
<settings>
<filter>text</filter>
<label translate="true">Question</label>
</settings>
</column>
<column name="answer">
<settings>
<filter>text</filter>
<label translate="true">Answer</label>
</settings>
</column>
</columns>
<listingToolbar name="listing_top">
<paging name="listing_paging"/>
</listingToolbar>
</listing>5. Set Up the Database Schema
Define the database schema to create the table where FAQ data will be stored.
Step 1: Create the db_schema.xml File
Create the file app/code/AffinityReader/Faq/etc/db_schema.xml.
<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
<table name="affinityreader_faq_entity" resource="default" engine="innodb" comment="FAQ Entity Table">
<column xsi:type="int" name="entity_id" nullable="false" identity="true" unsigned="true" comment="Entity ID"/>
<column xsi:type="text" name="question" nullable="false" comment="FAQ Question"/>
<column xsi:type="text" name="answer" nullable="false" comment="FAQ Answer"/>
<constraint xsi:type="primary" referenceId="PRIMARY">
<column name="entity_id"/>
</constraint>
</table>
</schema>Step 2: Run the Upgrade Command
After setting up the database schema, run the following command to update the database.
php bin/magento setup:upgrade6. Verify the Admin Grid
Once the setup is complete, navigate to Content > FAQ in the
Magento admin panel. You should see the FAQ grid displaying the data from your
affinityreader_faq_entity table.
Post a Comment