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

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: April 5, 2018  

February 28, 2018   177   Nandini R    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
Google+
http://www.webnexs.com/blog/kb/make-simple-grid-list-magento-2-admin-ui-component
Twitter
LinkedIn