Learn how to make a simple grid list in Magento 2 admin with UI component in this blog,
Get offers custom Magento development services for higher conversions!!!
How to Make a Simple Grid List for Magento 2 Admin with UI Component?
Here, the following steps help you how to make a Simple Grid List for Magento Admin with UI Component:
Step 1: Construct company_staff_listing.xml
Step 2: Construct StaffDataProvider
Step 3: Construct sample
Construct company_staff_listing.xml
File:
app/code/Webnexs/Company/view/Adminhtml/ui_component
Using this component, Magento default create-in component like all grid elements will handle with multiple XML file: Search, Filter, Export, Button, Mass move. So it’s easy to customize the grid without editing code
<!--?xml version="1.0" encoding="UTF-8"?-->
company_staff_listing.company_staff_listing_data_source
company_staff_listing.company_staff_listing_data_source
company_staff_listing_columns
company_staff_listing_data_source
Webnexs\Company\Ui\DataProvider\StaffDataProvider
staff_id
id
Magento_Ui/js/grid/provider
ui/grid/toolbar
Magento_Ui/js/grid/controls/bookmarks/bookmarks
dataGridAcions
company_staff_listing
dataGridFilters
filters
company_staff_listing.company_staff_listing.listing_top.bookmarks
current.filters
company_staff_listing.company_staff_listing.listing_top.listing_filters
company_staff_listing.company_staff_listing.company_staff_listing_columns.${ $.index }:visible
staff_name
Staff Name
staff_email
Staff Email
company_staff_listing.company_staff_listing.listing_top.bookmarks
current
company_staff_listing.company_staff_listing.company_staff_listing_columns.ids
true
staff_id
false
company_staff_listing.company_staff_listing.company_staff_listing_columns_editor
startEdit
${ $.$data.rowIndex }
true
company_staff_listing.company_staff_listing.company_staff_listing.listing_top.bookmarks
columns.${ $.index }
current.${ $.storageConfig.root }
false
55
staff_id
Magento_Ui/js/grid/columns/column
ui/grid/cells/html
true
number
left
Staff ID
text
true
Magento_Ui/js/grid/columns/column
text
left
Staff Name
Magento_Ui/js/grid/columns/column
ui/grid/cells/html
text
left
Staff EmailConstruct StaffDataProvider
app/code/Webnexs/Company/UI/DataProvider
StaffDataProvider.php
<!--?php namespace Webnexs\Company\Ui\DataProvider; use Webnexs\Company\Model\ResourceModel\Staff\CollectionFactory; /** * Class ProductDataProvider */ class StaffDataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider { protected $collection; protected $addFieldStrategies; protected $addFilterStrategies; public function __construct( $name, $primaryFieldName, $requestFieldName, CollectionFactory $collectionFactory, array $addFieldStrategies = [], array $addFilterStrategies = [], array $meta = [], array $data = [] ) { parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data); $this->collection = $collectionFactory->create(); $this->addFieldStrategies = $addFieldStrategies; $this->addFilterStrategies = $addFilterStrategies; } } </code> </pre> <p><strong>Step 3: create layout files in app/code/Webnexs/Company/view/Adminhtml/layout</strong></p> <p>Companyadmin_staff_index.xml<br ?-->
This is the layout this for the index action of Staff controller.
In this file, we use company_staff_listing as the component to show in the content area.<!--?xml version="1.0" encoding="UTF-8"?--> Staff Listing
Construct sample
app/code/Webnexs/Company/Model/Staff.php
<!--?php namespace Webnexs\Company\Model; class Staff extends \Magento\Framework\Model\AbstractModel { protected $_staffCollectionFactory; protected $_storeViewId = null; protected $_staffFactory; protected $_formFieldHtmlIdPrefix = 'page_'; protected $_storeManager; protected $_monolog; public function __construct( \Magento\Framework\Model\Context $context, \Magento\Framework\Registry $registry, \Webnexs\Company\Model\ResourceModel\Staff $resource, \Webnexs\Company\Model\ResourceModel\Staff\Collection $resourceCollection, \Webnexs\Company\Model\StaffFactory $staffFactory, \Webnexs\Company\Model\ResourceModel\Staff\CollectionFactory $staffCollectionFactory, \Magento\Store\Model\StoreManagerInterface $storeManager, \Magento\Framework\Logger\Monolog $monolog ) { parent::__construct( $context, $registry, $resource, $resourceCollection ); $this->_staffFactory = $staffFactory; $this->_storeManager = $storeManager; $this->_staffCollectionFactory = $staffCollectionFactory; $this->_monolog = $monolog; if ($storeViewId = $this->_storeManager->getStore()->getId()) { $this->_storeViewId = $storeViewId; } } } </code> </pre> <p>app/code/Webnexs/Company/Model/ResourceModel/Staff.php</p> <pre> <code> <?php namespace Webnexs\Company\Model\ResourceModel; class Staff extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb { /** * construct * @return void */ protected function _construct() { $this->_init('Webnexs_company_staffs', 'staff_id'); } } </code> </pre> <p>app/code/Webnexs/Company/Model/ResourceModel/Staff/Collection.php</p> <pre> <code> <?php namespace Webnexs\Company\Model\ResourceModel\Staff; class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection { protected $_idFieldName = 'staff_id'; /** * {@inheritdoc} */ protected function _construct() { $this->_init('Webnexs\Company\Model\Staff', 'Webnexs\Company\Model\ResourceModel\Staff'); } } </code> </pre> <p>Step 5: create controller<br ?-->
app/code/Webnexs/Company/Controller/Adminhtml/AbstractAction.php<!--?php namespace Webnexs\Company\Controller\Adminhtml; abstract class AbstractAction extends \Magento\Backend\App\Action { const PARAM_CRUD_ID = 'entity_id'; protected $_jsHelper; protected $_storeManager; protected $_resultForwardFactory; protected $_resultLayoutFactory; protected $_resultPageFactory; protected $_staffFactory; protected $_staffCollectionFactory; protected $_coreRegistry; protected $_fileFactory; public function __construct( \Magento\Backend\App\Action\Context $context, \Webnexs\Company\Model\StaffFactory $staffFactory, \Webnexs\Company\Model\ResourceModel\Staff\CollectionFactory $staffCollectionFactory, \Magento\Framework\Registry $coreRegistry, \Magento\Framework\App\Response\Http\FileFactory $fileFactory, \Magento\Framework\View\Result\PageFactory $resultPageFactory, \Magento\Framework\View\Result\LayoutFactory $resultLayoutFactory, \Magento\Backend\Model\View\Result\ForwardFactory $resultForwardFactory, \Magento\Store\Model\StoreManagerInterface $storeManager, \Magento\Backend\Helper\Js $jsHelper ) { parent::__construct($context); $this->_coreRegistry = $coreRegistry; $this->_fileFactory = $fileFactory; $this->_storeManager = $storeManager; $this->_jsHelper = $jsHelper; $this->_resultPageFactory = $resultPageFactory; $this->_resultLayoutFactory = $resultLayoutFactory; $this->_resultForwardFactory = $resultForwardFactory; $this->_staffFactory = $staffFactory; $this->_staffCollectionFactory = $staffCollectionFactory; } protected function _getBackResultRedirect(\Magento\Framework\Controller\Result\Redirect $resultRedirect, $paramCrudId = null) { switch ($this->getRequest()->getParam('back')) { case 'edit': $resultRedirect->setPath( '*/*/edit', [ static::PARAM_CRUD_ID => $paramCrudId, '_current' => true, ] ); break; case 'new': $resultRedirect->setPath('*/*/new', ['_current' => true]); break; default: $resultRedirect->setPath('*/*/'); } return $resultRedirect; } } </code> </pre> <p>app/code/Webnexs/Company/Controller/Adminhtml/Staff.php</p> <pre> <code> <?php namespace Webnexs\Company\Controller\Adminhtml; abstract class Staff extends \Webnexs\Company\Controller\Adminhtml\AbstractAction { const PARAM_CRUD_ID = 'staff_id'; protected function _isAllowed() { return $this->_authorization->isAllowed('Webnexs_Company::company_staff'); } } </code> </pre> <p>app/code/Webnexs/Company/Controller/Adminhtml/Staff/Index.php</p> <pre> <code> <?php namespace Webnexs\Company\Controller\Adminhtml\Staff; class Index extends \Webnexs\Company\Controller\Adminhtml\Staff { public function execute() { $resultPage = $this->_resultPageFactory->create(); return $resultPage; } } </code> </pre> <p>Step 6: add menu.xml in etc folder<br ?-->
app/code/Webnexs/Company/etc/adminhtml/menu.xml<!--?xml version="1.0" encoding="UTF-8"?-->
Contact us to develop a Magento store with 300+ features today!!!
Leave a Reply