Skip to content

Instantly share code, notes, and snippets.

@0-Sony
Last active April 12, 2024 10:36
Show Gist options
  • Save 0-Sony/84e1a058993afdfaae6909890da36311 to your computer and use it in GitHub Desktop.
Save 0-Sony/84e1a058993afdfaae6909890da36311 to your computer and use it in GitHub Desktop.
Magento 2.2 : Create Simple Grid UI Component List (tested on version 2.2.6)
<?xml version="1.0"?>
<!-- /**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
-->
<!-- MyNamespace/MyModule/etc/di.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="MyNameSpace\MyModule\Model\ResourceModel\MyEntity\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">my_table_name</argument>
<argument name="resourceModel" xsi:type="string">MyNameSpace\MyModule\Model\ResourceModel\MyEntity</argument>
</arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="mynamespace_mymodule_grid_data_source" xsi:type="string">MyNameSpace\MyModule\Model\ResourceModel\MyEntity\Grid\Collection</item>
</argument>
</arguments>
</type>
</config>
<?xml version="1.0" encoding="UTF-8"?>
<!-- /**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
-->
<!-- MyNamespace/MyModule/view/adminhtml/layout/my_controller_action_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="mynamespace_mymodule_grid"/>
</referenceContainer>
</body>
</page>
<?php
/**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
namespace MyNamespace\MyModule\Ui\Component;
use MyNamespace\MyModule\Model\ResourceModel\MyEntity\CollectionFactory;
use MyNamespace\MyModule\Model\MyEntity;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
}
<?php
/**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
namespace MyNamespace\MyModule\Model;
use Magento\Framework\DataObject\IdentityInterface;
use Magento\Framework\Model\AbstractModel;
class MyEntity extends AbstractModel implements IdentityInterface
{
const CACHE_TAG = 'mynamespace_myentity_myentity';
protected function _construct()
{
$this->_init('MyNamespace\MyModule\Model\ResourceModel\MyEntity');
}
/**
* @return array
*/
public function getIdentities()
{
return [self::CACHE_TAG . '_' . $this->getId()];
}
}
<?php
/**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
namespace MyNamespace\MyModule\Model\ResourceModel;
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
class MyEntity extends AbstractDb
{
protected $mainTable = 'my_main_table';
/**
* Resource initialization
*
* @return void
*/
protected function _construct()
{
$this->_init($this->mainTable, 'entity_id');
}
}
<?php
/**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
namespace MyNamespace\MyModule\Model\ResourceModel\MyEntity;
class Collection extends \Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult
{
protected function _construct()
{
$this->_init('MyNamespace\MyModule\Model\MyEntity', 'MyNamespace\MyModule\Model\ResourceModel\MyEntity');
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* @license All rights reserved
* @author Phuong LE <sony@menincode.con>
*/
-->
<!-- MyNamespace/MyModule/view/adminhtml/ui_component/mynamespace_mymodule_grid.xml -->
<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">
<!-- mynamespace_mymodule_grid_data_source => declare in our di.xml -->
<item name="provider" xsi:type="string">mynamespace_mymodule_grid.mynamespace_mymodule_grid_data_source</item>
</item>
</argument>
<settings>
<!-- the name must match <columns name="entity_columns"> -->
<spinner>entity_columns</spinner>
<deps>
<dep>mynamespace_mymodule_grid.mynamespace_mymodule_grid_data_source</dep>
</deps>
<buttons>
<button name="add">
<url path="*/*/new"/>
<class>primary</class>
<label translate="true">Add Slider</label>
</button>
</buttons>
</settings>
<dataSource name="mynamespace_mymodule_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="MyNameSpace\MyModule\Ui\Component\DataProvider" name="mynamespace_mymodule_grid_data_source">
<settings>
<primaryFieldName>entity_id</primaryFieldName> <!-- our primary column name in db -->
<requestFieldName>id</requestFieldName>
</settings>
</dataProvider>
</dataSource>
<listingToolbar name="listing_top">
<settings>
<sticky>true</sticky>
</settings>
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<filterSearch name="your_column_name"/> <!-- column name for a specific column -->
<filters name="listing_filters">
<settings>
<templates>
<filters>
<select>
<param name="template" xsi:type="string">ui/grid/filters/elements/ui-select</param>
<param name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</param>
</select>
</filters>
</templates>
</settings>
</filters>
<paging name="listing_paging"/>
<exportButton name="export_button"/>
</listingToolbar>
<columns name="entity_columns">
<!-- Allow us to select lines -->
<selectionsColumn name="ids">
<settings>
<indexField>entity_id</indexField>
</settings>
</selectionsColumn>
<column name="entity_id">
<settings>
<filter>text</filter>
<label translate="true">Entity Id</label>
<sorting>asc</sorting>
</settings>
</column>
<column name="data_column_1">
<settings>
<filter>text</filter>
<label translate="true">Data Column 1</label>
</settings>
</column>
<column name="data_column_2">
<settings>
<filter>text</filter>
<label translate="true">Data Column 2</label>
</settings>
</column>
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
<settings>
<filter>dateRange</filter>
<label translate="true">Exported At</label>
<componentType>Magento_Ui/js/grid/columns/date</componentType>
<dataType>date</dataType>
</settings>
</column>
</columns>
</listing>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment