Exploring Magento 2.2 UI Component – Part 4 Creating the Grid UI Component
In our Last Tutorial Exploring Magento 2.2 UI Component – Part 3 we have created a new Top Level Admin menu called “Upcoming Shows” and created a custom template output.
In this Tutorial we will Work on the Actual Grid UI Component by creating UI Component XML and including it in adminhtml layout
Step 1:- For this usecase i have defined the UI Component name as “tradeshows_grid.xml”. Since we are going to build the Grid UI Component we need to include the “listing” tag as a top level tag. Listing is a basic component responsible for rendering grids, lists and tiles, providing filtering, pagination, sorting and other features.
Mydons\Tradeshows\view\adminhtml\ui_component\tradeshows_grid.xml
|
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 |
<?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">tradeshows_grid.tradeshows_grid_data_source</item> </item> </argument> <settings> <buttons> <button name="add"> <url path="*/*/new"/> <class>primary</class> <label translate="true">Add Upcoming Show</label> </button> </buttons> <spinner>tradeshows_grid_columns</spinner> <deps> <dep>tradeshows_grid.tradeshows_grid_data_source</dep> </deps> </settings> <dataSource name="tradeshows_grid_data_source" component="Magento_Ui/js/grid/provider"> <settings> <storageConfig> <param name="indexField" xsi:type="string">entity_id</param> </storageConfig> <updateUrl path="mui/index/render"/> </settings> <dataProvider class="Mydons\Tradeshows\Ui\Component\Listing\DataProviders\Tradeshows\Grid" name="tradeshows_grid_data_source"> <settings> <requestFieldName>id</requestFieldName> <primaryFieldName>entity_id</primaryFieldName> </settings> </dataProvider> </dataSource> <listingToolbar name="listing_top"> <paging name="listing_paging"/> </listingToolbar> <columns name="tradeshows_grid_columns"> <selectionsColumn name="ids"> <settings> <resizeEnabled>false</resizeEnabled> <resizeDefaultWidth>55</resizeDefaultWidth> <indexField>entity_id</indexField> </settings> </selectionsColumn> <column name="entity_id"> <settings> <filter>textRange</filter> <sorting>asc</sorting> <label>ID</label> </settings> </column> <column name="show_title"> <settings> <filter>text</filter> <label>Shows</label> </settings> </column> <column name="location"> <settings> <filter>text</filter> <label>Location</label> </settings> </column> <column name="show_date"> <settings> <filter>text</filter> <label>Show Dates</label> </settings> </column> <actionsColumn name="actions" class="Mydons\Tradeshows\Ui\Component\Listing\Column\Tradeshowsgrid\PageActions"> <settings> <resizeEnabled>false</resizeEnabled> <resizeDefaultWidth>107</resizeDefaultWidth> <indexField>entity_id</indexField> </settings> </actionsColumn> </columns> </listing> |
The above code snippet defines one main component(listing component) and includes serveral child components like datasource, dataprovider,columns etc.
In the Columns Component we can specify the list of fields to be displayed as Grid Columns. The Column “name” attribute is mapped with the database table column name. The settings tag is where we can define the filter and Grid Column label for a field.
In the actions column we need to specify the class that is responsible for rendering the Edit link, here entity_id is passed as parameter.
Step 2:- The Datasource provides the actual data to be displayed in the Grid component using the collectionFactory.
Mydons\Tradeshows\Ui\Component\Listing\DataProviders\Tradeshows\Grid.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php namespace Mydons\Tradeshows\Ui\Component\Listing\DataProviders\Tradeshows; class Grid extends \Magento\Ui\DataProvider\AbstractDataProvider { public function __construct( $name, $primaryFieldName, $requestFieldName, \Mydons\Tradeshows\Model\ResourceModel\Shows\CollectionFactory $collectionFactory, array $meta = [], array $data = [] ) { parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data); $this->collection = $collectionFactory->create(); } } |
Step 3:- In the Grid Column the Edit action link should be created using the below class.
Mydons\Tradeshows\Ui\Component\Listing\Column\Tradeshowsgrid\PageActions.php
|
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 |
<?php namespace Mydons\Tradeshows\Ui\Component\Listing\Column\Tradeshowsgrid; class PageActions extends \Magento\Ui\Component\Listing\Columns\Column { public function prepareDataSource(array $dataSource) { if (isset($dataSource["data"]["items"])) { foreach ($dataSource["data"]["items"] as & $item) { $name = $this->getData("name"); $id = "X"; if(isset($item["entity_id"])) { $id = $item["entity_id"]; } $item[$name]["view"] = [ "href"=>$this->getContext()->getUrl( "tradeshows_grid/shows/edit",["entity_id"=>$id]), "label"=>__("Edit") ]; } } return $dataSource; } } |
Step 4:- We Now modify the “Index” Controller execute Method. Now the “Upcoming Shows” menu will be highlighted whenever it is clicked.
|
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 |
<?php namespace Mydons\Tradeshows\Controller\Adminhtml\Index; class Index extends \Magento\Backend\App\Action { protected $resultPageFactory; public function __construct( \Magento\Backend\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory) { $this->resultPageFactory = $resultPageFactory; parent::__construct($context); } public function execute() { $resultPage = $this->resultPageFactory->create(); //Menu Id defined in /etc/adminhtml/menu.xml $resultPage->setActiveMenu('Mydons_Tradeshows::upcomingshows'); $resultPage->getConfig()->getTitle()->prepend(__('Upcoming Shows')); return $resultPage; } /** * Check Permission. * * @return bool */ protected function _isAllowed() { //resource value given in /etc/adminhtml/menu.xml return $this->_authorization->isAllowed('Mydons_Tradeshows::upcomingshows'); } } |
Step 5:- Once the UI Component and all the necessary classes are created, the UI Component XML file i.e tradeshows_grid needs to be included in the adminhtml layout xml file as shown below.
Mydons\Tradeshows\view\adminhtml\layout\tradeshows_index_index.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="content"> <uiComponent name="tradeshows_grid"/> <!-- UI Component name here --> </referenceBlock> </body> </page> |
