In this blog, we will learn to Create Admin Grid Using UI Component. Magento 2 provides two ways to create Admin Grid: using layout and using components.
Please follow this blog to create a module with the admin menu, the router which we will use to create the grid. In this blog, I will use the namespace as “Yournamespace” and the module name is “Modulename”
** I am creating Brand Module **
Step 1: Create Folder in following path
app/code/Yournamespace/Modulename
Step 2: Register module
Create app/code/Yournamespace/Modulename/registration.php and paste the code
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Yournamespace_Modulename',
__DIR__
);
Step 3: Now that we have a module, we need to create a module.xml file
Create file app/code/Yournamespace/Modulename/etc/module.xml in that folder then paste below code.
<?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="Yournamespace_Modulename" setup_version="1.0.0">
</module>
</config>
Step 4: Create Admin Route: route name is brand
First create admin route and Create file app/code/Yournamespace/Modulename/etc/adminhtml/routes.xml
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="modulename" frontName="modulename">
<module name="Yournamespace_Modulename" before="Magento_Backend" />
</route>
</router>
</config>
Step 5: Now create Controller
Create file app/code/Yournamespace/Modulename/Controller/Adminhtml/Branddetails/Index.php
**controller name is branddetails**
**action name is index**
**finally we create handle = modulename/branddetails/index **
<?php
namespace Yournamespace\Modulename\Controller\Adminhtml\Branddetails;
class Index extends \Magento\Backend\App\Action
{
protected $resultPageFactory;
protected $_publicActions = ['index'];
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute() {
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend((__('Manage Brand Details')));
$this->_setActiveMenu('Yournamespace_Modulename::braddetails');
$resultPage->addBreadcrumb(__('modulename'), __('Brand'));
$resultPage->addBreadcrumb(__('modulename'), __('Manage Brand Details'));
return $resultPage;
}
protected function _isAllowed()
{
return $this->_authorization->isAllowed('Yournamespace_Modulename::braddetails');
}
}
Step 6: Now, Create layout file
Create app/code/Yournamespace/Modulename/view/adminhtml/layout/modulename_branddetails_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceBlock name="menu">
<action method="setActive">
<argument name="itemId" xsi:type="string">Yournamespace_Modulename::branddetails</argument>
</action>
</referenceBlock>
<referenceBlock name="page.title">
<action method="setTitleClass">
<argument name="class" xsi:type="string">complex</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<uiComponent name="Yournamespace_modulename_branddetails_listing"/>
</referenceContainer>
</body>
</page>
Step 7: Create admin menu
A. Create file app/code/Yournamespace/Modulename/etc/adminhtml/menu.xml
<?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="Yournamespace_Modulename::branddetails"
title="Manage Brand(s)"
module="Yournamespace_Modulename"
sortOrder="10"
action="modulename/branddetails/index"
resource="Magento_Backend::content"
parent="Yournamespace_Core::core" />
<!-- For configuration -->
</menu>
</config>
B. Create file app/code/Yournamespace/Modulename/etc/acl.xml
<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="Yournamespace_Core::core" title="core" sortOrder="100">
<resource id="Yournamespace_Modulename::branddetails" title="branddetails" sortOrder="100" />
</resource>
</resource>
</resources>
</acl>
</config>
If you require then you can show all categories on system config file.
Step 8: Now, Create component layout file
Create ui_component file in following path app/code/Yournamespace/Modulename/view/adminhtml/Yournamespace_modulename_branddetails_listing.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">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing_data_source</item>
<item name="deps" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">yournamespace_modulename_branddetails_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New Post</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<dataSource name="yournamespace_modulename_branddetails_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Yournamespace\Modulename\Ui\DataProvider\BranddetailsDataProvider</argument>
<argument name="name" xsi:type="string">yournamespace_modulename_branddetails_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">entity_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>
<container name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
<item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
</item>
</argument>
<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">yournamespace_modulename_branddetails_listing</item>
</item>
</item>
</argument>
</bookmark>
<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>
<exportButton name="export_button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns.ids</item>
</item>
</argument>
</exportButton>
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing_data_source</item>
<item name="chipsProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="templates" xsi:type="array">
<item name="filters" xsi:type="array">
<item name="select" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
<item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns.${ $.index }:visible</item>
</item>
</item>
</item>
<item name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</item>
</argument>
</filters>
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns.ids</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
<action name="delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">delete</item>
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="url" path="mageplaza_helloworld/post/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete Posts</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected Posts?</item>
</item>
</item>
</argument>
</action>
<action name="edit">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">edit</item>
<item name="label" xsi:type="string" translate="true">Edit</item>
<item name="callback" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns_editor</item>
<item name="target" xsi:type="string">editSelected</item>
</item>
</item>
</argument>
</action>
</massaction>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns.ids</item>
</item>
</argument>
</paging>
</container>
<columns name="yournamespace_modulename_branddetails_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="editorConfig" xsi:type="array">
<item name="selectProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns.ids</item>
<item name="enabled" xsi:type="boolean">true</item>
<item name="indexField" xsi:type="string">entity_id</item>
<item name="clientConfig" xsi:type="array">
<item name="saveUrl" xsi:type="url" path="mageplaza_helloworld/post/inlineEdit"/>
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns_editor</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
</item>
</item>
</argument>
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
</selectionsColumn>
<column name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
<item name="label" xsi:type="string" translate="true">Name</item>
</item>
</argument>
</column>
<column name="url_key">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="visible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">URL Key</item>
<item name="dataType" xsi:type="string">text</item>
</item>
</argument>
</column>
<column name="tags">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="visible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Tags</item>
<item name="dataType" xsi:type="string">text</item>
</item>
</argument>
</column>
<column name="status">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Status</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="dataType" xsi:type="string">select</item>
</item>
</argument>
</column>
<column name="sample_country_selection">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Locale\Country</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">select</item>
<item name="visible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Sample Country Selection</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="dataType" xsi:type="string">select</item>
</item>
</argument>
</column>
<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="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Created</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="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Modified</item>
</item>
</argument>
</column>
<actionsColumn name="actions" class="Yournamespace\Modulename\Ui\Component\Listing\Column\BrandActions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">107</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
</actionsColumn>
</columns>
<container name="sticky">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
<item name="toolbarProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.listing_top</item>
<item name="listingProvider" xsi:type="string">yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_listing.yournamespace_modulename_branddetails_columns</item>
</item>
</argument>
</container>
</listing>
Step 9: Create a listing toolbar
Create file app/code/Yournamespace/Modulename/Ui/Component/Listing/Column/BrandActions.php
<?php
namespace Yournamespace\Modulename\Ui\Component\Listing\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
class BrandActions extends Column {
const FORM_URL_PATH_EDIT = 'Modulename/Branddetails/editform';
const FORM_URL_PATH_DELETE = 'Modulename/Branddetails/deleteform';
protected $urlBuilder;
private $editUrl;
public function __construct(ContextInterface $context, UiComponentFactory $uiComponentFactory, UrlInterface $urlBuilder, array $components = [], array $data = [], $editUrl = self::FORM_URL_PATH_EDIT) {
$this->urlBuilder = $urlBuilder;
$this->editUrl = $editUrl;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
public function prepareDataSource(array $dataSource) {
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
$name = $this->getData('name');
if (isset($item['form_id'])) {
$item[$name]['edit'] = [
'href' => $this->urlBuilder->getUrl($this->editUrl, ['form_id' => $item['form_id']]),
'label' => __('Edit')
];
$item[$name]['delete'] = [
'href' => $this->urlBuilder->getUrl(self::FORM_URL_PATH_DELETE, ['form_id' => $item['form_id']]),
'label' => __('Delete'),
'confirm' => [
'title' => __('Delete "${ $.$data.title }"'),
'message' => __('Are you sure you wan\'t to delete a "${ $.$data.name }" record?')
]
];
}
}
}
return $dataSource;
}
}
Step 10: Now need to create the component’s data provider
Create File Create file app/code/Yournamespace/Modulename/Ui/BranddetailsDataProvider.php
<?php
namespace Yournamespace\Modulename\Ui\DataProvider;
use Magento\Ui\DataProvider\AbstractDataProvider;
use Yournamespace\Modulename\Model\ResourceModel\Branddetails\CollectionFactory;
class BranddetailsDataProvider extends AbstractDataProvider
{
protected $collection;
protected $addFieldStrategies;
protected $addFilterStrategies;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
$this->collection = $collectionFactory->create();
}
public function getCollection()
{
return $this->collection;
}
public function getData()
{
if (!$this->getCollection()->isLoaded()) {
$this->getCollection()->load();
}
return $this->getCollection()->toArray();
}
}
Step 11: Create database schema
Create file app/code/Yournamespace/Modulename/Setup/InstallSchema.php
<?php
namespace Yournamespace\Modulename\Setup;
class InstallSchema implements \Magento\Framework\Setup\InstallSchemaInterface
{
public function install(\Magento\Framework\Setup\SchemaSetupInterface $setup, \Magento\Framework\Setup\ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
if (!$installer->tableExists('yournamespace_modulename_branddetails')) {
$table = $installer->getConnection()->newTable(
$installer->getTable('yournamespace_modulename_branddetails')
)
->addColumn(
'entity_id',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
null,
[
'identity' => true,
'nullable' => false,
'primary' => true,
'unsigned' => true,
],
'ID'
)
->addColumn(
'title',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
['nullable => false'],
'Title'
)
->addColumn(
'status',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
1,
[],
'Status'
)
->addColumn(
'created_at',
\Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
null,
[],
'Created At'
)
->setComment('Branddetails Table');
$installer->getConnection()->createTable($table);
$installer->getConnection()->addIndex(
$installer->getTable('yournamespace_modulename_branddetails'),
$setup->getIdxName(
$installer->getTable('yournamespace_modulename_branddetails'),
['title','url_key','description','brand_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
),
['title','url_key','description','brand_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
}
$installer->endSetup();
}
}
Step 12: Then RUN the upgrade command for setup installer script.
php bin/magento setup:upgrade
Step 13: Now we need to create Model.
Create Model folder in the following directory app/code/Yournamespace/Modulename/
A. Then create file Branddetails.php
<?php
namespace Yournamespace\Modulename\Model;
use \Magento\Framework\Model\AbstractModel;
class Branddetails extends AbstractModel
{
public function __construct(
\Magento\Framework\Model\Context $context,
\Magento\Framework\Registry $registry,
\Magento\Framework\Model\ResourceModel\AbstractResource $resource = null,
\Magento\Framework\Data\Collection\AbstractDb $resourceCollection = null,
array $data = []
) {
parent::__construct($context, $registry, $resource, $resourceCollection, $data);
}
protected function _construct()
{
$this->_init('Yournamespace\Modulename\Model\ResourceModel\Branddetails');
}
}
B. Now Create ResourceModel folder in app/code/Yournamespace/Modulename/Model. Then, create Branddetails.php
<?php
namespace Yournamespace\Modulename\Model\ResourceModel;
class Branddetails extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
protected function _construct()
{
$this->_init('yournamespace_modulename_branddetails', 'entity_id');
}
}
C. Now, Create Branddetails Folder in following path app/code/Yournamespace/Modulename/Model/ResourceModel/Branddetails. Then, create Collection.php file
<?php
namespace Yournamespace\Modulename\Model\ResourceModel\Branddetails;
class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
{
protected $_idFieldName = 'entity_id';
protected function _construct()
{
$this->_init('Yournamespace\Modulename\Model\Branddetails', 'Yournamespace\Modulename\Model\ResourceModel\Branddetails');
}
}
Step 14: Now, RUN the below command.
1. php bin/magento setup:di:compile
2. php bin/magento setup:static-content:deploy
3. php bin/magento cache:flush
Now click on your created menu in the admin panel, you will get the Grid of your module with form.
These are all the above steps to create an Admin Grid Using UI Component in Magento 2. I hope all you guys can learn Magento 2 more easily with our series lesson.
In the next topic, we will show you how to Upload image in the custom module using UI Component in Magento 2.
The 14 steps I mentioned above is the shortest process for you to create an Admin Grid Using UI Component in Magento 2. With this blog, you can create the Module in Magento 2 easily.
As you followed all steps you get perfect output. There are too many benefits of Magento developed website in an eCommerce business. In 2020, You will see how Magento will become game-changer for eCommerce business. There are too many benefits of Magento developed website that can be more effective in 2020.
