Here are the steps that you will follow in this Create simple grid listing in Magento 2 admin with UI component:
- Step 1. Create company_staff_listing.xml
- Step 2. Create StaffDataProvider
- Step 3: create model
Create simple grid listing in Magento 2 .In my last post in this series, we have learnt “How to Register a module and Create Database in Magento 2”.
Now we will continue to create a grid listing page in admin for Magento 2.
This is the final result:
Below are some steps to get it done:
Contents
Step 1. Create company_staff_listing.xml
in app/code/Magestore/Company/view/Adminhtml/ui_component
by using this component, all grid elements will be handle by XML file with many default build-in component of Magento such as: search, filter, export, button, mass action. So it’s easy for us to customize the grid without editing code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
<!--?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 Magestore\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 Email |
Step 2. Create StaffDataProvider in:
app/code/Magestore/Company/UI/DataProvider
StaffDataProvider.php
|
1 2 3 4 |
<!--?php namespace Magestore\Company\Ui\DataProvider; use Magestore\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/Magestore/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. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--?xml version="1.0" encoding="UTF-8"?--> Staff Listing |
Step 3. create model
app/code/Magestore/Company/Model/Staff.php
|
1 2 3 |
<!--?php namespace Magestore\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, \Magestore\Company\Model\ResourceModel\Staff $resource, \Magestore\Company\Model\ResourceModel\Staff\Collection $resourceCollection, \Magestore\Company\Model\StaffFactory $staffFactory, \Magestore\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/Magestore/Company/Model/ResourceModel/Staff.php</p> <pre> <code> <?php namespace Magestore\Company\Model\ResourceModel; class Staff extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb { /** * construct * @return void */ protected function _construct() { $this->_init('magestore_company_staffs', 'staff_id'); } } </code> </pre> <p>app/code/Magestore/Company/Model/ResourceModel/Staff/Collection.php</p> <pre> <code> <?php namespace Magestore\Company\Model\ResourceModel\Staff; class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection { protected $_idFieldName = 'staff_id'; /** * {@inheritdoc} */ protected function _construct() { $this->_init('Magestore\Company\Model\Staff', 'Magestore\Company\Model\ResourceModel\Staff'); } } </code> </pre> <p>Step 5: create controller<br ?--> app/code/Magestore/Company/Controller/Adminhtml/AbstractAction.php |
|
1 2 3 |
<!--?php namespace Magestore\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, \Magestore\Company\Model\StaffFactory $staffFactory, \Magestore\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/Magestore/Company/Controller/Adminhtml/Staff.php</p> <pre> <code> <?php namespace Magestore\Company\Controller\Adminhtml; abstract class Staff extends \Magestore\Company\Controller\Adminhtml\AbstractAction { const PARAM_CRUD_ID = 'staff_id'; protected function _isAllowed() { return $this->_authorization->isAllowed('Magestore_Company::company_staff'); } } </code> </pre> <p>app/code/Magestore/Company/Controller/Adminhtml/Staff/Index.php</p> <pre> <code> <?php namespace Magestore\Company\Controller\Adminhtml\Staff; class Index extends \Magestore\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/Magestore/Company/etc/adminhtml/menu.xml |
|
1 2 3 4 5 6 |
<!--?xml version="1.0" encoding="UTF-8"?--> |
Finally, here is the result.
You can download source code of lesson here:
Create simple grid listing in Magento 2 admin with UI component
