Create uiComponent for the simplenews grid list
This tutorials will replace the news grid list for the previous one, Magento 2: A full Magento 2 Module, with new created uiComponent. uiComponent is the new feature for Magento 2 by utilizing the modern JavaScript frameworks, requireJs, knockoutJs, underscoreJs. It’s very complicated unless you are familiar with these frameworks. Today I will show you how to generate it step by step and replace the news grid list from last tutorial, Magento 2: A full Magento 2 Module.
Create new uiComponent xml file
#app/code/Jeff/SimpleNews/view/adminhtml/ui_component/simplenews_listing.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">simplenews_listing.simplenews_listing_data_source</item> <item name="deps" xsi:type="string">simplenews_listing.simplenews_listing_data_source</item> </item> <item name="spinner" xsi:type="string">simplenews_listing_columns</item> <item name="buttons" xsi:type="array"> <item name="add" xsi:type="array"> <item name="name" xsi:type="string">add</item> <item name="label" xsi:type="string">Add New</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/News/new</item> </item> </item> </argument> <dataSource name="simplenews_listing_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">Jeff\SimpleNews\Ui\Component\Listing\DataProviders\Simplenews\Listing</argument> <argument name="name" xsi:type="string">simplenews_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">id</argument> <argument name="requestFieldName" xsi:type="string">id</argument> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="update_url" xsi:type="url" path="mui/index/render"/> <item name="storageConfig" xsi:type="array"> <item name="indexField" xsi:type="string">id</item> </item> </item> </argument> </argument> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item> </item> </argument> </dataSource> <listingToolbar name="listing_top"> <paging name="listing_paging"/> </listingToolbar> <columns name="simplenews_listing_columns"> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">55</item> <item name="indexField" xsi:type="string">id</item> <item name="sortOrder" xsi:type="number">10</item> </item> </argument> </selectionsColumn> <column name="id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">textRange</item> <item name="sorting" xsi:type="string">desc</item> <item name="label" xsi:type="string" translate="true">ID</item> </item> </argument> </column> <column name="title"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Title</item> <item name="sortOrder" xsi:type="number">20</item> </item> </argument> </column> <column name="summary"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Summary</item> <item name="sortOrder" xsi:type="number">30</item> </item> </argument> </column> <column name="description"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Description</item> <item name="sortOrder" xsi:type="number">40</item> </item> </argument> </column> <column name="created_at"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Create At</item> <item name="sortOrder" xsi:type="number">50</item> </item> </argument> </column> <actionsColumn name="actions" class="Jeff\SimpleNews\Ui\Component\Listing\Column\Simplenewslisting\PageActions"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">107</item> <item name="indexField" xsi:type="string">id</item> <item name="sortOrder" xsi:type="number">200</item> </item> </argument> </actionsColumn> </columns> </listing>
Create Data Provider for uiComponent
#app/code/Jeff/SimpleNews/Ui/Component/Listing/DataProviders/Simplenews/Listing.php <?php namespace Jeff\SimpleNews\Ui\Component\Listing\DataProviders\Simplenews; class Listing extends \Magento\Ui\DataProvider\AbstractDataProvider { public function __construct( $name, $primaryFieldName, $requestFieldName, \Jeff\SimpleNews\Model\ResourceModel\News\CollectionFactory $collectionFactory, array $meta = [], array $data = [] ) { parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data); $this->collection = $collectionFactory->create(); } }
Create Page Actions for the Grid List
#app/code/Jeff/SimpleNews/Ui/Component/Listing/Column/Simplenewslisting/PageActions.php <?php namespace Jeff\SimpleNews\Ui\Component\Listing\Column\Simplenewslisting; 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["id"])) { $id = $item["id"]; } $item[$name]["view"] = [ "href"=>$this->getContext()->getUrl( "simplenews/news/edit",["id"=>$id]), "label"=>__("Edit") ]; } } return $dataSource; } }
Update simplenews_news_index.xml file to use the new uiComponent
#app/code/Jeff/SimpleNews/view/adminhtml/layout/simplenews_news_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"> <update handle="formkey" /> <update handle="simplenews_news_grid_block" /> <body> <referenceBlock name="content"> <!-- comment this line and add <uiComponent> tag to use new uiComponent <block class="Jeff\SimpleNews\Block\Adminhtml\News" name="jeff_simplenews_news.grid.container" /> --> <uiComponent name="simplenews_listing" /> </referenceBlock> </body> </page> <!-- This file is used to declare grid container block -->
After clear cache, you can check the simple news grid list. The appearance is the same. But you will notice the list is loaded by JavaScript’s Ajax way by showing the spinner image first then the grid list.
I hope this tutorial will help you generate your own uiComponent for the grid list.
During Loading:
Loaded Successfull:
