Exploring Magento 2.2 UI Component

Exploring Magento 2.2 UI Component – Part 4

April 2, 2018
Magento
0 Comments
Ramesh

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

<?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>

<?xml version="1.0"?>

<item name="provider" xsi:type="string">tradeshows_grid.tradeshows_grid_data_source</item>

</item>

</argument>

<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>

<param name="indexField" xsi:type="string">entity_id</param>

</storageConfig>

</settings>

<primaryFieldName>entity_id</primaryFieldName>

</settings>

</dataProvider>

</dataSource>

</listingToolbar>

<resizeEnabled>false</resizeEnabled>

<indexField>entity_id</indexField>

</settings>

</selectionsColumn>

<filter>textRange</filter>

</settings>

</column>

<label>Shows</label>

</settings>

</column>

<label>Location</label>

</settings>

</column>

<label>Show Dates</label>

</settings>

</column>

<resizeEnabled>false</resizeEnabled>

<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

<?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();
    }
}

<?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

<?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;
    }    
    
}

<?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.

<?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');
    }
}

<?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

<?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>

<?xml version="1.0"?>

<body>

</referenceBlock>

</body>

</page>