Adding a new column to a grid is not so complex task as distinct from creation a column with filtering. Let’s take a look how to perform it in Magento 2.1, by adding a new column into the order grid.<\/p>\n
Note.<\/strong> The code listed below in XML format is valid only for Magento 2.1 version or later. And we are not going to consider a code for elder versions in this article. If you still use Magento 1, we highly recommend that you migrate to Magento 2<\/a>.<\/em><\/p>\n All of the directives are placed in the <module>\/view\/adminhtml\/ui_component\/ <\/em>directory. <\/em>Let’s create the “sales_order_grid.xml<\/em>” file. The name of the file has to match with a parent component, which we want to extend.<\/p>\n So let’s add the code into the file as follows:<\/p>\n Let’s break down this code:<\/p>\n In line<\/p>\n We add the column into order grid. Class Module\\Ui\\Component\\Columns\\OrderGrid<\/em> should extend the Magento\\Ui\\Component\\Listing\\Columns\\Column<\/em> class.<\/p>\n We should override the prepareDataSource()<\/em> method:<\/p>\n Current grid row data is stored in the variable $item<\/em>. The name of the column is available in the array element “name”<\/em>:<\/p>\n Thus we can fill the row the data.<\/p>\n But let’s get back to the sales_order_grid.xml<\/em> file. All what we can see in the argument line and below is related to the description of column.<\/p>\n The following line states that we can render any valid HTML code in the cell. Magento 2 supports a few pre-defined template renders out of the box, all of them are placed in the module-ui.<\/em><\/p>\n In the following example we didn’t specify the component<\/em>, but additionally, we can specify the component<\/em> of the column in argument<\/em> tag as well. For example:<\/p>\n Component defines which type of column will be used. For example, it could be date, column, actions, multiselect, select or thumbnail<\/em> type. As well as templates, all of the components are placed in the module-ui<\/em>. At this stage, we already have the column in order grid, and in case we don’t need the filtering by this column, we can finish. But if we do, that is becoming not so easy task.<\/p>\n Take your online store to the next level with BelVG Magento Webdesign<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n In my view sales_order<\/em> table update way leads to the overmuch data and compatibility reduction. That’s why I decided to perform it through the plugin filtering. At first, let’s add the filter into sales_order_grid.xml<\/em> file. Then add the following code right after the close tag:<\/p>\n So we are going to create dropdown filter, with multiselect.<\/p>\n In line:<\/p>\n We designate class, in which filter value will be defined. This class should carry out interface \\Magento\\Framework\\Data\\OptionSourceInterface<\/em>.<\/p>\n The line<\/p>\n defines the provider we use. In this case, we are using the parental provider.<\/p>\n For each filter, we should designate collection, where data will be shown<\/p>\n Statement ${ $.parentName}<\/em> referrers to the collection used by default. dataSource<\/em> tag specifies the collection name. For example, for order sales grid it should be as follows:<\/p>\n Take your online store to the next level with BelVG Magento 2 Migration<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n The collection class for the order sales is sales_order_grid_data_source<\/em>, which is defined in vendor\/magento\/module-sales\/etc\/di.xml<\/em>:<\/p>\n So we use the collection as a source for filtering. And now, all that we have to do is to add a plugin, which could add our data into filtering results.<\/p>\n Let’s register a plugin in etc\/di.xml<\/p>\n And add method Module\\Plugin\\AdditionalFields\\CollectionFactory::aroundGetReport()<\/em><\/p>\n Filtering by the current field should be available after plugin installation.<\/p>\n The following lines<\/p>\n are needed for multiselect rendering, and if we remove them, parental filter type-select will be in use by default. The current filter helps to perform selecting by several filter values.<\/p>\n Magento 2 provides a very comfortable way of adding the column into order grid. But in case you need to add filtering by the current column, there are 2 ways.<\/p>\n The first is more simple<\/strong> — to add two columns into the sales_order and sales_order_grid tables. But this way has a few disadvantages. UPD:<\/strong> Magento has changed some syntax of *.xml files for ui-components for 2.1.3 and newer versions. Here is a module with an example: https:\/\/github.com\/Galillei\/sample_add_columns_to_order_grid<\/a>. It has been successfully tested on Magento 2.1.4 CE, and it should work on Magento 2.1.5 as well.<\/p>\n Need a quality Magento extension for great Administration functionalities? Visit out BelVG store<\/a>!<\/p>\n Take your online store to the next level with BelVG Magento Custom Development <\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"Magento 2 UI components allow to generate and display several lists and grid types. As …","protected":false},"author":47,"featured_media":11493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389],"tags":[],"class_list":["post-11491","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t<listing xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\r\n<columns>\r\n \t<column name=\"example_status\" class=\"Module\\Ui\\Component\\Columns\\OrderGrid\">\r\n \t<argument name=\"data\" xsi:type=\"array\">\r\n\t <item name=\"config\" xsi:type=\"array\">\r\n \t<item name=\"label\" xsi:type=\"string\" translate=\"true\">Status example<\/item>\r\n \t<item name=\"sortOrder\" xsi:type=\"number\">50<\/item>\r\n \t<item name=\"align\" xsi:type=\"string\">left<\/item>\r\n \t<item name=\"dataType\" xsi:type=\"string\">text<\/item>\r\n \t<item name=\"visible\" xsi:type=\"boolean\">true<\/item>\r\n \t<item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item>\r\n \t<\/item>\r\n \t<\/argument>\r\n \t<\/column>\r\n <\/columns>\r\n<\/listing>\r\n<\/pre>\n
![\"Andrey_Dubina\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/11\/Andrey_Dubina.png\" "\\"How")
Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Andrey<\/a><\/div>\n
<column name=\"example_status\" class=\"Module\\Ui\\Component\\Columns\\OrderGrid\"><\/pre>\n
public function prepareDataSource(array $dataSource)\r\n{\r\n if (isset($dataSource['data']['items'])) {\r\n foreach ($dataSource['data']['items'] as &$item) {\r\n \/\/put logic here\r\n }\r\n }\r\n return $dataSource;\r\n}<\/pre>\n$item[$this->getData('name')] = $value;<\/pre>\n<item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item><\/pre>\n
<item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/date<\/item><\/pre>\n
![\"magento](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/01\/magento-webdesign-1.png\" "\\"How")
Magento Webdesign<\/h3>
There are 2 ways of solving the problem:<\/h3>\n
\n
<listingToolbar name=\"listing_top\">\r\n <filters name=\"listing_filters\">\r\n <filterSelect name=\"example_status\">\r\n <argument name=\"optionsProvider\" xsi:type=\"configurableObject\">\r\n <argument name=\"class\" xsi:type=\"string\">Modulei\\Model\\Config\\Statuses<\/argument>\r\n <\/argument>\r\n <argument name=\"data\" xsi:type=\"array\">\r\n <item name=\"config\" xsi:type=\"array\">\r\n <item name=\"provider\" xsi:type=\"string\">${ $.parentName }<\/item>\r\n <item name=\"dataScope\" xsi:type=\"string\">example_status<\/item>\r\n <item name=\"caption\" xsi:type=\"string\" translate=\"true\">Select status<\/item>\r\n <item name=\"label\" xsi:type=\"string\" translate=\"true\">Select status<\/item>\r\n <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/form\/element\/ui-select<\/item>\r\n <item name=\"template\" xsi:type=\"string\">ui\/grid\/filters\/elements\/ui-select<\/item>\r\n <\/item>\r\n <\/argument>\r\n <\/filterSelect>\r\n <\/filters>\r\n<\/listingToolbar><\/pre>\n<argument name=\"class\" xsi:type=\"string\">Modulei\\Model\\Config\\Statuses<\/argument><\/pre>\n
<item name=\"provider\" xsi:type=\"string\">${ $.parentName }<\/item><\/pre>\n<dataSource name=\"sales_order_grid_data_source\">\r\n <argument name=\"dataProvider\" xsi:type=\"configurableObject\">\r\n <argument name=\"class\" xsi:type=\"string\">Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider<\/argument>\r\n <argument name=\"name\" xsi:type=\"string\">sales_order_grid_data_source<\/argument>\r\n <argument name=\"primaryFieldName\" xsi:type=\"string\">entity_id<\/argument>\r\n <argument name=\"requestFieldName\" xsi:type=\"string\">id<\/argument>\r\n <argument name=\"data\" xsi:type=\"array\">\r\n <item name=\"config\" xsi:type=\"array\">\r\n <item name=\"update_url\" xsi:type=\"url\" path=\"mui\/index\/render\"\/>\r\n <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/provider<\/item>\r\n <\/item>\r\n <\/argument>\r\n <\/argument>\r\n<\/dataSource><\/pre>\n
![\"migration](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/06\/migration-to-magento-2.png\" "\\"How")
Magento 2 Migration<\/h3>
<type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\">\r\n <arguments>\r\n \t<argument name=\"collections\" xsi:type=\"array\">\r\n \t<item name=\"sales_order_grid_data_source\" xsi:type=\"string\">Magento\\Sales\\Model\\ResourceModel\\Order\\Grid\\Collection<\/item>\r\n<\/pre>\n
<type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\">\r\n <plugin\r\n name=\"sales_order_additional_columns\"\r\n type=\"Module\\Plugin\\AdditionalFields\\CollectionFactory\"\r\n sortOrder=\"100\"\r\n disabled=\"false\"\r\n \/>\r\n<\/type><\/pre>\n
public function aroundGetReport(\r\n \\Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory $subject,\r\n \\Closure $proceed,\r\n $requestName\r\n)\r\n{\r\n $result = $proceed($requestName);\r\n if ($requestName == 'sales_order_grid_data_source') {\r\n if ($result instanceof Magento\\Sales\\Model\\ResourceModel\\Order\\Grid\\Collection) {\r\n \/\/add code to join table, and mapping field to select\r\n }\r\n }\r\n return $result;\r\n}<\/pre>\n<item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/form\/element\/ui-select<\/item>\r\n<item name=\"template\" xsi:type=\"string\">ui\/grid\/filters\/elements\/ui-select<\/item>\r\n<\/pre>\n
As a result, we have:<\/h3>\n
![\"add](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2016\/08\/add_column_in_admin_sales_grid.png\" "\\"How")
<\/p>\n
\nAnd another one I’ve just covered in this article<\/strong> — adding filter through the plugins method. This method is quite more complex, but it has no disadvantages that we mentioned before.<\/p>\n![\"magento](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/01\/magento-custom-development.png\" "\\"How")
Magento Custom Development<\/h3>