How to make Simple Grid List for Magento 2 Admin with UI Component

Looking for Magento services that can help you get the simple grid list for Magento 2, click here to know more.

Here the following steps help you how to make Simple Grid List for Magento 2 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 Email

Construct 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-&gt;collection = $collectionFactory-&gt;create(); $this-&gt;addFieldStrategies = $addFieldStrategies; $this-&gt;addFilterStrategies = $addFilterStrategies; } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;&lt;strong&gt;Step 3: create layout files in app/code/Webnexs/Company/view/Adminhtml/layout&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Companyadmin_staff_index.xml&lt;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-&gt;_staffFactory = $staffFactory; $this-&gt;_storeManager = $storeManager; $this-&gt;_staffCollectionFactory = $staffCollectionFactory; $this-&gt;_monolog = $monolog; if ($storeViewId = $this-&gt;_storeManager-&gt;getStore()-&gt;getId()) { $this-&gt;_storeViewId = $storeViewId; } } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;app/code/Webnexs/Company/Model/ResourceModel/Staff.php&lt;/p&gt; &lt;pre&gt; &lt;code&gt; &lt;?php namespace Webnexs\Company\Model\ResourceModel; class Staff extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb { /** * construct * @return void */ protected function _construct() { $this-&gt;_init('Webnexs_company_staffs', 'staff_id'); } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;app/code/Webnexs/Company/Model/ResourceModel/Staff/Collection.php&lt;/p&gt; &lt;pre&gt; &lt;code&gt; &lt;?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-&gt;_init('Webnexs\Company\Model\Staff', 'Webnexs\Company\Model\ResourceModel\Staff'); } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;Step 5: create controller&lt;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-&gt;_coreRegistry = $coreRegistry; $this-&gt;_fileFactory = $fileFactory; $this-&gt;_storeManager = $storeManager; $this-&gt;_jsHelper = $jsHelper; $this-&gt;_resultPageFactory = $resultPageFactory; $this-&gt;_resultLayoutFactory = $resultLayoutFactory; $this-&gt;_resultForwardFactory = $resultForwardFactory; $this-&gt;_staffFactory = $staffFactory; $this-&gt;_staffCollectionFactory = $staffCollectionFactory; } protected function _getBackResultRedirect(\Magento\Framework\Controller\Result\Redirect $resultRedirect, $paramCrudId = null) { switch ($this-&gt;getRequest()-&gt;getParam('back')) { case 'edit': $resultRedirect-&gt;setPath( '*/*/edit', [ static::PARAM_CRUD_ID =&gt; $paramCrudId, '_current' =&gt; true, ] ); break; case 'new': $resultRedirect-&gt;setPath('*/*/new', ['_current' =&gt; true]); break; default: $resultRedirect-&gt;setPath('*/*/'); } return $resultRedirect; } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;app/code/Webnexs/Company/Controller/Adminhtml/Staff.php&lt;/p&gt; &lt;pre&gt; &lt;code&gt; &lt;?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-&gt;_authorization-&gt;isAllowed('Webnexs_Company::company_staff'); } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;app/code/Webnexs/Company/Controller/Adminhtml/Staff/Index.php&lt;/p&gt; &lt;pre&gt; &lt;code&gt; &lt;?php namespace Webnexs\Company\Controller\Adminhtml\Staff; class Index extends \Webnexs\Company\Controller\Adminhtml\Staff { public function execute() { $resultPage = $this-&gt;_resultPageFactory-&gt;create(); return $resultPage; } } &lt;/code&gt; &lt;/pre&gt; &lt;p&gt;Step 6: add menu.xml in etc folder&lt;br ?-->
app/code/Webnexs/Company/etc/adminhtml/menu.xml
<!--?xml version="1.0" encoding="UTF-8"?-->

Last Update: September 17, 2019  

February 28, 2018   455   Nandini Ramachandran    Magento2    
Total 2 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn