{"id":6452,"date":"2016-10-18T16:38:15","date_gmt":"2016-10-18T16:38:15","guid":{"rendered":"https:\/\/blog.mageworx.com\/?p=6452"},"modified":"2022-11-09T12:51:07","modified_gmt":"2022-11-09T12:51:07","slug":"upgrading-the-standard-magento-2-grid-with-ui-components-part-2","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/upgrading-the-standard-magento-2-grid-with-ui-components-part-2","title":{"rendered":"Upgrading the Standard Magento 2 Grid with UI Components (Part 2)"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p><a href=\"https:\/\/www.mageworx.com\/blog\/2016\/09\/magento-2-module-with-conditions-model-fieldset\/\">In the previous article<\/a>, we\u2019ve described how to create a module with the basic conditions and the interface that will let us work with them. During the creation process we used the standard Magento blocks. However, Magento 2 is capable of doing a lot more.<\/p>\n<p>I\u2019m talking about the possibility to improve the interface with the help of UI components. These components are added with the Magento\/UI module.<\/p>\n<p><em>*although these components can be found in v.2.0, we strongly recommend you to use the 2.1 version.<\/em><\/p>\n<p>From this article, you\u2019ll learn how to remake the standard Grid (located in the layout: <em>app\/code\/Vendor\/Rules\/view\/adminhtml\/layout\/vendor_rules_example_rule_index.xml<\/em>) and enrich it with UI components.<\/p>\n<p><!--more--><\/p>\n<p>Just compare. This is an old grid:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6459\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/8d21749a4f9e95807e1f2a0ea980b10c.png\" alt=\"Magento 2 Grid\" width=\"1508\" height=\"578\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/8d21749a4f9e95807e1f2a0ea980b10c.png 1508w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/8d21749a4f9e95807e1f2a0ea980b10c-600x230.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/8d21749a4f9e95807e1f2a0ea980b10c-1200x460.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/8d21749a4f9e95807e1f2a0ea980b10c-768x294.png 768w\" sizes=\"auto, (max-width: 1508px) 100vw, 1508px\" \/><\/p>\n<p>with a new one, made with UX components:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6460\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1.png\" alt=\"783ee65384ceff9f3e875c61c792cac2\" width=\"1805\" height=\"593\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1.png 1805w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1-600x197.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1-1200x394.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1-768x252.png 768w\" sizes=\"auto, (max-width: 1805px) 100vw, 1805px\" \/><\/p>\n<p>As you can see,&nbsp; an upgraded Grid will be a lot more user-friendly and time-saving, easier to scale, has a lot of great extra features (e.g. bookmarks that are capable to save the current Grid state) and set smart filters.<\/p>\n<p>So, let&#8217;s start.<\/p>\n<p>First, you need to make some changes in the module. Below is how to do that:<\/p>\n<p>1) Create a new file to declare the necessary components:<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">&gt; app\/code\/Vendor\/Rules\/etc\/di.xml<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true\">    &lt;?xml version=\"1.0\"?&gt;\n    &lt;config xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\"&gt;\n        &lt;virtualType name=\"VendorRulesRuleGridDataProvider\" type=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider\"&gt;\n            &lt;arguments&gt;\n                &lt;argument name=\"collection\" xsi:type=\"object\" shared=\"false\"&gt;Vendor\\Rules\\Model\\ResourceModel\\Rule\\Collection&lt;\/argument&gt;\n                &lt;argument name=\"filterPool\" xsi:type=\"object\" shared=\"false\"&gt;VendorRulesRuleGridFilterPool&lt;\/argument&gt;\n            &lt;\/arguments&gt;\n        &lt;\/virtualType&gt;\n        &lt;virtualType name=\"VendorRulesRuleGridFilterPool\" type=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\FilterPool\"&gt;\n            &lt;arguments&gt;\n                &lt;argument name=\"appliers\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"regular\" xsi:type=\"object\"&gt;Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\RegularFilter&lt;\/item&gt;\n                    &lt;item name=\"fulltext\" xsi:type=\"object\"&gt;Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\FulltextFilter&lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/arguments&gt;\n        &lt;\/virtualType&gt;\n        &lt;type name=\"Vendor\\Rules\\Model\\ResourceModel\\Rule\\Grid\\Collection\"&gt;\n            &lt;arguments&gt;\n                &lt;argument name=\"mainTable\" xsi:type=\"string\"&gt;vendor_rules&lt;\/argument&gt;\n                &lt;argument name=\"eventPrefix\" xsi:type=\"string\"&gt;vendor_rules_rule_grid_collection&lt;\/argument&gt;\n                &lt;argument name=\"eventObject\" xsi:type=\"string\"&gt;rule_grid_collection&lt;\/argument&gt;\n                &lt;argument name=\"resourceModel\" xsi:type=\"string\"&gt;Vendor\\Rules\\Model\\ResourceModel\\Rule&lt;\/argument&gt;\n            &lt;\/arguments&gt;\n        &lt;\/type&gt;\n        &lt;type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\"&gt;\n            &lt;arguments&gt;\n                &lt;argument name=\"collections\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"vendor_rules_rule_listing_data_source\" xsi:type=\"string\"&gt;Vendor\\Rules\\Model\\ResourceModel\\Rule\\Grid\\Collection&lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/arguments&gt;\n        &lt;\/type&gt;\n    &lt;\/config&gt;\n<\/pre>\n<p><em>VendorRulesRuleGridDataProvide<\/em> \u2014 this virtual type provides data for UI grid of rules. <em>VendorRulesRuleGridFilterPool<\/em>, in turn, adds filtering functionality that lets you add\/ modify any existing filters.<\/p>\n<p>Note, to make the Grid work right with this particular collection you need to add it to the list of all available collections. To do that, add <em>vendor_rules_rule_listing_data_source<\/em> with the collection value-based class: <em>Vendor\\Rules\\Model\\ResourceModel\\Rule\\Grid\\Collection into Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory collections.<\/em><\/p>\n<p>2) For UI Grid, we need a separate collection that will represent <em>`Magento\\Framework\\Api\\Search\\SearchResultInterface`<\/em> interface.<\/p>\n<p>It contains the standard methods that will let you work with the Grid and filters. This class can be customized to your personal needs by changing the way the <em>search by collections<\/em> works.<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">    &gt; app\/code\/Vendor\/Rules\/Model\/ResourceModel\/Rule\/Grid\/Collection.php\n<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">&lt;?php\n\n    namespace Vendor\\Rules\\Model\\ResourceModel\\Rule\\Grid;\n\n    use Vendor\\Rules\\Model\\ResourceModel\\Rule\\Collection as RuleCollection;\n    use Magento\\Framework\\Api\\Search\\SearchResultInterface;\n    use Magento\\Framework\\Api\\SearchCriteriaInterface;\n    use Magento\\Framework\\Data\\Collection\\Db\\FetchStrategyInterface;\n    use Magento\\Framework\\Data\\Collection\\EntityFactory;\n    use Magento\\Framework\\Event\\ManagerInterface;\n    use Magento\\Framework\\Model\\ResourceModel\\Db\\AbstractDb;\n    use Psr\\Log\\LoggerInterface;\n\n    class Collection extends RuleCollection implements SearchResultInterface\n    {\n        \/**\n         * Aggregations\n         *\n         * @var \\Magento\\Framework\\Search\\AggregationInterface\n         *\/\n        protected $aggregations;\n\n        \/**\n         * constructor\n         *\n         * @param \\Magento\\Framework\\Data\\Collection\\EntityFactory $entityFactory\n         * @param \\Psr\\Log\\LoggerInterface $logger\n         * @param \\Magento\\Framework\\Data\\Collection\\Db\\FetchStrategyInterface $fetchStrategy\n         * @param \\Magento\\Framework\\Event\\ManagerInterface $eventManager\n         * @param $mainTable\n         * @param $eventPrefix\n         * @param $eventObject\n         * @param $resourceModel\n         * @param $model\n         * @param $connection\n         * @param \\Magento\\Framework\\Model\\ResourceModel\\Db\\AbstractDb $resource\n         *\/\n        public function __construct(\n            EntityFactory $entityFactory,\n            LoggerInterface $logger,\n            FetchStrategyInterface $fetchStrategy,\n            ManagerInterface $eventManager,\n            $mainTable,\n            $eventPrefix,\n            $eventObject,\n            $resourceModel,\n            $model = 'Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\Document',\n            $connection = null,\n            AbstractDb $resource = null\n        ) {\n            parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $connection, $resource);\n            $this-&gt;_eventPrefix = $eventPrefix;\n            $this-&gt;_eventObject = $eventObject;\n            $this-&gt;_init($model, $resourceModel);\n            $this-&gt;setMainTable($mainTable);\n        }\n\n        \/**\n         * @return \\Magento\\Framework\\Search\\AggregationInterface\n         *\/\n        public function getAggregations()\n        {\n            return $this-&gt;aggregations;\n        }\n\n        \/**\n         * @param \\Magento\\Framework\\Search\\AggregationInterface $aggregations\n         * @return $this\n         *\/\n        public function setAggregations($aggregations)\n        {\n            $this-&gt;aggregations = $aggregations;\n        }\n\n        \/**\n         * Retrieve all ids for collection\n         * Backward compatibility with EAV collection\n         *\n         * @param int $limit\n         * @param int $offset\n         * @return array\n         *\/\n        public function getAllIds($limit = null, $offset = null)\n        {\n            return $this-&gt;getConnection()-&gt;fetchCol($this-&gt;_getAllIdsSelect($limit, $offset), $this-&gt;_bindParams);\n        }\n\n        \/**\n         * Get search criteria.\n         *\n         * @return \\Magento\\Framework\\Api\\SearchCriteriaInterface|null\n         *\/\n        public function getSearchCriteria()\n        {\n            return null;\n        }\n\n        \/**\n         * Set search criteria.\n         *\n         * @param \\Magento\\Framework\\Api\\SearchCriteriaInterface $searchCriteria\n         * @return $this\n         * @SuppressWarnings(PHPMD.UnusedFormalParameter)\n         *\/\n        public function setSearchCriteria(SearchCriteriaInterface $searchCriteria = null)\n        {\n            return $this;\n        }\n\n        \/**\n         * Get total count.\n         *\n         * @return int\n         *\/\n        public function getTotalCount()\n        {\n            return $this-&gt;getSize();\n        }\n\n        \/**\n         * Set total count.\n         *\n         * @param int $totalCount\n         * @return $this\n         * @SuppressWarnings(PHPMD.UnusedFormalParameter)\n         *\/\n        public function setTotalCount($totalCount)\n        {\n            return $this;\n        }\n\n        \/**\n         * Set items list.\n         *\n         * @param \\Magento\\Framework\\Api\\ExtensibleDataInterface[] $items\n         * @return $this\n         * @SuppressWarnings(PHPMD.UnusedFormalParameter)\n         *\/\n        public function setItems(array $items = null)\n        {\n            return $this;\n        }\n    }\n\n    ?&gt;<\/pre>\n<p>3) Modify the main collection the way described below (it\u2019s important, as our custom collection is inherited from it). You should make the following changes:<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">    &gt; app\/code\/Vendor\/Rules\/Model\/ResourceModel\/Rule\/Collection.php<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">&lt;?php\n\n    namespace Vendor\\Rules\\Model\\ResourceModel\\Rule;\n\n    class Collection extends \\Magento\\Rule\\Model\\ResourceModel\\Rule\\Collection\\AbstractCollection\n    {\n        \/**\n         * Set resource model and determine field mapping\n         *\n         * @return void\n         *\/\n        protected function _construct()\n        {\n            $this-&gt;_init('Vendor\\Rules\\Model\\Rule', 'Vendor\\Rules\\Model\\ResourceModel\\Rule');\n        }\n\n        \/**\n         * Filter collection by specified date.\n         * Filter collection to only active rules.\n         *\n         * @param string|null $now\n         * @use $this-&gt;addStoreGroupDateFilter()\n         * @return $this\n         *\/\n        public function setValidationFilter($now = null)\n        {\n            if (!$this-&gt;getFlag('validation_filter')) {\n                $this-&gt;addDateFilter($now);\n                $this-&gt;addIsActiveFilter();\n                $this-&gt;setOrder('sort_order', self::SORT_ORDER_DESC);\n                $this-&gt;setFlag('validation_filter', true);\n            }\n\n            return $this;\n        }\n\n        \/**\n         * From date or to date filter\n         *\n         * @param $now\n         * @return $this\n         *\/\n        public function addDateFilter($now)\n        {\n            $this-&gt;getSelect()-&gt;where(\n                'from_date is null or from_date &lt;= ?',\n                $now\n            )-&gt;where(\n                'to_date is null or to_date &gt;= ?',\n                $now\n            );\n\n            return $this;\n        }\n    }\n\n    ?&gt;\n<\/pre>\n<p>4) Next, remove the old markup from the Grid layout and add a UI-listing there:<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">    &gt; app\/code\/Vendor\/Rules\/view\/adminhtml\/layout\/vendor_rules_example_rule_index.xml<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">  &lt;?xml version=\"1.0\"?&gt;\n    &lt;page xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"&gt;\n        &lt;body&gt;\n        &lt;referenceBlock name=\"menu\"&gt;\n            &lt;action method=\"setActive\"&gt;\n                &lt;argument name=\"itemId\" xsi:type=\"string\"&gt;Vendor_Rules::vendor_rules&lt;\/argument&gt;\n            &lt;\/action&gt;\n        &lt;\/referenceBlock&gt;\n        &lt;referenceBlock name=\"page.title\"&gt;\n            &lt;action method=\"setTitleClass\"&gt;\n                &lt;argument name=\"class\" xsi:type=\"string\"&gt;complex&lt;\/argument&gt;\n            &lt;\/action&gt;\n        &lt;\/referenceBlock&gt;\n        &lt;referenceContainer name=\"content\"&gt;\n            &lt;uiComponent name=\"vendor_rules_rule_listing\"\/&gt;\n        &lt;\/referenceContainer&gt;\n        &lt;\/body&gt;\n    &lt;\/page&gt;<\/pre>\n<p>Basically, we just add the mentioned `<em>vendor_rules_rule_listing<\/em>` into the page content (the main action), change the status of our product menu to \u2018Active\u2019, and set the title class.<\/p>\n<p>5) At the next step, we crate the UI listing, that will be placed here:<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">    &gt; app\/code\/Vendor\/Rules\/view\/adminhtml\/ui_component\/vendor_rules_rule_listing.xml<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">&lt;?xml version=\"1.0\"?&gt;\n    &lt;listing xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Ui\/etc\/ui_configuration.xsd\"&gt;\n        &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n            &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing_data_source&lt;\/item&gt;\n                &lt;item name=\"deps\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing_data_source&lt;\/item&gt;\n            &lt;\/item&gt;\n            &lt;item name=\"spinner\" xsi:type=\"string\"&gt;vendor_rules_rule_columns&lt;\/item&gt;\n            &lt;item name=\"buttons\" xsi:type=\"array\"&gt;\n                &lt;item name=\"add\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"name\" xsi:type=\"string\"&gt;add&lt;\/item&gt;\n                    &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Add New Rule&lt;\/item&gt;\n                    &lt;item name=\"class\" xsi:type=\"string\"&gt;primary&lt;\/item&gt;\n                    &lt;item name=\"url\" xsi:type=\"string\"&gt;*\/*\/newaction&lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/item&gt;\n        &lt;\/argument&gt;\n        &lt;dataSource name=\"vendor_rules_rule_listing_data_source\"&gt;\n            &lt;argument name=\"dataProvider\" xsi:type=\"configurableObject\"&gt;\n                &lt;argument name=\"class\" xsi:type=\"string\"&gt;VendorRulesRuleGridDataProvider&lt;\/argument&gt;\n                &lt;argument name=\"name\" xsi:type=\"string\"&gt;vendor_rules_rule_listing_data_source&lt;\/argument&gt;\n                &lt;argument name=\"primaryFieldName\" xsi:type=\"string\"&gt;rule_id&lt;\/argument&gt;\n                &lt;argument name=\"requestFieldName\" xsi:type=\"string\"&gt;rule_id&lt;\/argument&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"update_url\" xsi:type=\"url\" path=\"mui\/index\/render\"\/&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/argument&gt;\n            &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/provider&lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/argument&gt;\n        &lt;\/dataSource&gt;\n        &lt;container name=\"listing_top\"&gt;\n            &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"template\" xsi:type=\"string\"&gt;ui\/grid\/toolbar&lt;\/item&gt;\n                    &lt;item name=\"stickyTmpl\" xsi:type=\"string\"&gt;ui\/grid\/sticky\/toolbar&lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/argument&gt;\n            &lt;bookmark name=\"bookmarks\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"storageConfig\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"namespace\" xsi:type=\"string\"&gt;vendor_rules_rule_listing&lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/bookmark&gt;\n            &lt;component name=\"columns_controls\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"columnsData\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns&lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/controls\/columns&lt;\/item&gt;\n                        &lt;item name=\"displayArea\" xsi:type=\"string\"&gt;dataGridActions&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/component&gt;\n            &lt;filters name=\"listing_filters\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"columnsProvider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns&lt;\/item&gt;\n                        &lt;item name=\"storageConfig\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks&lt;\/item&gt;\n                            &lt;item name=\"namespace\" xsi:type=\"string\"&gt;current.filters&lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=\"templates\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"filters\" xsi:type=\"array\"&gt;\n                                &lt;item name=\"select\" xsi:type=\"array\"&gt;\n                                    &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/form\/element\/ui-select&lt;\/item&gt;\n                                    &lt;item name=\"template\" xsi:type=\"string\"&gt;ui\/grid\/filters\/elements\/ui-select&lt;\/item&gt;\n                                &lt;\/item&gt;\n                            &lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=\"childDefaults\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.listing_filters&lt;\/item&gt;\n                            &lt;item name=\"imports\" xsi:type=\"array\"&gt;\n                                &lt;item name=\"visible\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.${ $.index }:visible&lt;\/item&gt;\n                            &lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/item&gt;\n                    &lt;item name=\"observers\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"column\" xsi:type=\"string\"&gt;column&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/filters&gt;\n            &lt;paging name=\"listing_paging\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"storageConfig\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks&lt;\/item&gt;\n                            &lt;item name=\"namespace\" xsi:type=\"string\"&gt;current.paging&lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=\"selectProvider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/paging&gt;\n        &lt;\/container&gt;\n        &lt;columns name=\"vendor_rules_rule_columns\"&gt;\n            &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"storageConfig\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"provider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks&lt;\/item&gt;\n                        &lt;item name=\"namespace\" xsi:type=\"string\"&gt;current&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/argument&gt;\n            &lt;selectionsColumn name=\"ids\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"resizeEnabled\" xsi:type=\"boolean\"&gt;false&lt;\/item&gt;\n                        &lt;item name=\"resizeDefaultWidth\" xsi:type=\"string\"&gt;55&lt;\/item&gt;\n                        &lt;item name=\"indexField\" xsi:type=\"string\"&gt;rule_id&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/selectionsColumn&gt;\n            &lt;column name=\"rule_id\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/column&lt;\/item&gt;\n                    &lt;\/item&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;textRange&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;text&lt;\/item&gt;\n                        &lt;item name=\"sorting\" xsi:type=\"string\"&gt;asc&lt;\/item&gt;\n                        &lt;item name=\"align\" xsi:type=\"string\"&gt;left&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;ID&lt;\/item&gt;\n                        &lt;item name=\"sortOrder\" xsi:type=\"number\"&gt;1&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;column name=\"name\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/column&lt;\/item&gt;\n                    &lt;\/item&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;text&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;text&lt;\/item&gt;\n                        &lt;item name=\"align\" xsi:type=\"string\"&gt;left&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Name&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;column name=\"is_active\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"options\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"active\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"value\" xsi:type=\"string\"&gt;1&lt;\/item&gt;\n                            &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Active&lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=\"inactive\" xsi:type=\"array\"&gt;\n                            &lt;item name=\"value\" xsi:type=\"string\"&gt;0&lt;\/item&gt;\n                            &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Inactive&lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/item&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;select&lt;\/item&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/select&lt;\/item&gt;\n                        &lt;item name=\"editor\" xsi:type=\"string\"&gt;select&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;select&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Is Active&lt;\/item&gt;\n                        &lt;item name=\"sortOrder\" xsi:type=\"number\"&gt;65&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;column name=\"sort_order\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/column&lt;\/item&gt;\n                    &lt;\/item&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;text&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;number&lt;\/item&gt;\n                        &lt;item name=\"align\" xsi:type=\"string\"&gt;left&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Priority&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;column name=\"from_date\" class=\"Magento\\Ui\\Component\\Listing\\Columns\\Date\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"sorting\" xsi:type=\"string\"&gt;desc&lt;\/item&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;dateRange&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;date&lt;\/item&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/date&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Start&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;column name=\"to_date\" class=\"Magento\\Ui\\Component\\Listing\\Columns\\Date\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"sorting\" xsi:type=\"string\"&gt;desc&lt;\/item&gt;\n                        &lt;item name=\"filter\" xsi:type=\"string\"&gt;dateRange&lt;\/item&gt;\n                        &lt;item name=\"dataType\" xsi:type=\"string\"&gt;date&lt;\/item&gt;\n                        &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/columns\/date&lt;\/item&gt;\n                        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;End&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/column&gt;\n            &lt;actionsColumn name=\"actions\" class=\"Vendor\\Rules\\Ui\\Component\\Listing\\Column\\RuleActions\"&gt;\n                &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                        &lt;item name=\"indexField\" xsi:type=\"string\"&gt;rule_id&lt;\/item&gt;\n                        &lt;item name=\"urlEntityParamName\" xsi:type=\"string\"&gt;rule_id&lt;\/item&gt;\n                        &lt;item name=\"sortOrder\" xsi:type=\"number\"&gt;70&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n            &lt;\/actionsColumn&gt;\n        &lt;\/columns&gt;\n        &lt;container name=\"sticky\"&gt;\n            &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui\/js\/grid\/sticky\/sticky&lt;\/item&gt;\n                    &lt;item name=\"toolbarProvider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top&lt;\/item&gt;\n                    &lt;item name=\"listingProvider\" xsi:type=\"string\"&gt;vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns&lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/argument&gt;\n        &lt;\/container&gt;\n    &lt;\/listing&gt;\n<\/pre>\n<p>Listing `<em>dataSource<\/em>`contains a link to `<em>dataProvider<\/em>` &#8211; the type we\u2019ve created in `<em>di.xml<\/em>`. It contains the input data that is necessary to for the Grid.<\/p>\n<p>From here, we need to define the key filed \u2014 in our case it is `<em>rule_id<\/em>`.<\/p>\n<p>Additionally, you can also add your custom buttons, just describe them in the \u2018buttons\u2019 section. In our example, we\u2019ve added the standard \u2018Add\u2019&nbsp; button with an address `<em>*\/*\/newaction<\/em>` ( * in the path corresponds to the current meaning).<\/p>\n<p>`<em>container name=&#8221;listing_top&#8221;<\/em>` contains some extra listing components: filters, pagination,etc. You can change them according to your personal requirements.<\/p>\n<p>`<em>columns name=\u201cvendor_rules_rule_columns&#8221;<\/em>` contains the column that are almost the same, as in the default Grid. The only meaningful difference is a new `<em>actionsColumn<\/em>` column that introduces a set of actions: <a href=\"https:\/\/www.mageworx.com\/magento2-order-editor-extension.html\">edit and delete<\/a>. These actions can also be extended, if needed.<\/p>\n<p>As you\u2019ve probably noticed, this column has a new class. Let\u2019s learn how we can create it:<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">    &gt; app\/code\/Vendor\/Rules\/Ui\/Component\/Listing\/Column\/RuleActions.php<\/pre>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true \">&lt;?php\n    namespace Vendor\\Rules\\Ui\\Component\\Listing\\Column;\n\n    class RuleActions extends \\Magento\\Ui\\Component\\Listing\\Columns\\Column\n    {\n        \/**\n         * Url path  to edit\n         *\n         * @var string\n         *\/\n        const URL_PATH_EDIT = 'vendor_rules\/example_rule\/edit';\n\n        \/**\n         * Url path  to delete\n         *\n         * @var string\n         *\/\n        const URL_PATH_DELETE = 'vendor_rules\/example_rule\/delete';\n\n        \/**\n         * URL builder\n         *\n         * @var \\Magento\\Framework\\UrlInterface\n         *\/\n        protected $urlBuilder;\n\n        \/**\n         * Constructor\n         *\n         * @param \\Magento\\Framework\\UrlInterface $urlBuilder\n         * @param \\Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface $context\n         * @param \\Magento\\Framework\\View\\Element\\UiComponentFactory $uiComponentFactory\n         * @param array $components\n         * @param array $data\n         *\/\n        public function __construct(\n            \\Magento\\Framework\\UrlInterface $urlBuilder,\n            \\Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface $context,\n            \\Magento\\Framework\\View\\Element\\UiComponentFactory $uiComponentFactory,\n            array $components = [],\n            array $data = []\n        ) {\n            $this-&gt;urlBuilder = $urlBuilder;\n            parent::__construct($context, $uiComponentFactory, $components, $data);\n        }\n\n        \/**\n         * Prepare Data Source\n         *\n         * @param array $dataSource\n         * @return array\n         *\/\n        public function prepareDataSource(array $dataSource)\n        {\n            if (!isset($dataSource['data']['items'])) {\n                return $dataSource;\n            }\n\n            foreach ($dataSource['data']['items'] as &amp;$item) {\n\n                if (!isset($item['rule_id'])) {\n                    continue;\n                }\n\n                $item[$this-&gt;getData('name')] = [\n                    'edit' =&gt; [\n                        'href' =&gt; $this-&gt;urlBuilder-&gt;getUrl(\n                            static::URL_PATH_EDIT,\n                            [\n                                'id' =&gt; $item['rule_id'],\n                            ]\n                        ),\n                        'label' =&gt; __('Edit'),\n                    ],\n                    'delete' =&gt; [\n                        'href' =&gt; $this-&gt;urlBuilder-&gt;getUrl(\n                            static::URL_PATH_DELETE,\n                            [\n                                'id' =&gt; $item['rule_id'],\n                            ]\n                        ),\n                        'label' =&gt; __('Delete'),\n                        'confirm' =&gt; [\n                            'title' =&gt; __('Delete \"${ $.$data.name }\"'),\n                            'message' =&gt; __('Are you sure you wan\\'t to delete the rule \"${ $.$data.name }\" ?'),\n                        ],\n                    ],\n                ];\n            }\n\n            return $dataSource;\n        }\n    }\n\n    ?&gt;<\/pre>\n<p>This class is in charge of processing actions from the Grid. From here, it\u2019s possible to change URLs or the name of the transmitted parameter. In our case, the key is rule_id (it\u2019s transmitted under the name \u2018id\u2019, to ease the understanding of its value).<\/p>\n<p>It looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-6453 size-full\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/cbb7bf8d8c4d8c6139a4062ef4623fdc.png\" alt=\"cbb7bf8d8c4d8c6139a4062ef4623fdc\" width=\"135\" height=\"174\"><\/p>\n<p>If you&#8217;ve done everything the right way, your grid should look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6454\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2.png\" alt=\"783ee65384ceff9f3e875c61c792cac2\" width=\"1805\" height=\"593\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2.png 1805w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-600x197.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-1200x394.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2016\/10\/783ee65384ceff9f3e875c61c792cac2-768x252.png 768w\" sizes=\"auto, (max-width: 1805px) 100vw, 1805px\" \/><\/p>\n<p>As we can see from the example, it quite easy to transform the existing standard Grid into UI. In addition to extending the standard Grid functionality, it also allows you to simplify working with this part of Magento 2 functionality.<\/p>\n<p><strong>P.S.<\/strong> In the next article of the series, we are going to describe the possibility of adding mass\u2014actions and extra columns.<\/p>\n<p>Stay tuned! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>In the previous article, we\u2019ve described how to create a module with the basic conditions and the interface that will let us work with them. During the creation process we used the standard Magento blocks. However, Magento 2 is capable of doing a lot more. I\u2019m talking about the possibility to improve the interface with [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":6449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,425],"tags":[436],"class_list":{"0":"post-6452","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento-2","8":"category-magento-how-tos","9":"tag-developer-diaries"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/6452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=6452"}],"version-history":[{"count":10,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/6452\/revisions"}],"predecessor-version":[{"id":16433,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/6452\/revisions\/16433"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/6449"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=6452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=6452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=6452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}