Last active
April 12, 2024 10:36
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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()]; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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'); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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'); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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