{"id":18789,"date":"2019-02-07T14:55:05","date_gmt":"2019-02-07T12:55:05","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=18789"},"modified":"2019-12-04T11:34:53","modified_gmt":"2019-12-04T09:34:53","slug":"how-to-add-column-in-sales-order-grid-in-magento","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-add-column-in-sales-order-grid-in-magento.html","title":{"rendered":"How to Add Column in Sales Order Grid in Magento"},"content":{"rendered":"\n

Nearly 3 years have passed since the publication of the How to Add Column in Sales Order Grid in Magento 2.1<\/a> article. Over this time two new versions – Magento 2.2 and 2.3 – have been released.<\/p>\n

<\/p>\n

With the introduction of new versions, the syntax of UI Components has also been updated. Therefore, it seemed logical to update the article and adapt the code for Magento 2.3. There are few intuitive changes in the code that affected sales_order_grid.xml<\/em> file.<\/p>\n

<code>\r\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<listing xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\r\n        xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\r\n   <columns name=\"sales_order_columns\">\r\n       <column name=\"rics_status\" class=\"Belvg\\ColumnToOrderGrid\\Ui\\Component\\Columns\\OrderGrid\">\r\n           <settings>\r\n               <filter>select<\/filter>\r\n               <options class=\"Belvg\\ColumnToOrderGrid\\Model\\Config\\Statuses\"\/>\r\n               <visible>true<\/visible>\r\n               <dataType>select<\/dataType>\r\n               <label translate=\"true\">Example column<\/label>\r\n               <bodyTmpl>ui\/grid\/cells\/html<\/bodyTmpl>\r\n               <sortable>false<\/sortable>\r\n           <\/settings>\r\n       <\/column>\r\n   <\/columns>\r\n<\/listing>\r\n\r\n<\/code>\r\n<\/pre>\n
The changes mainly affected the xml structure of the Ui component document. Also, xml attributes became xml element. In my opinion, the new code is more readable and understandable. Link to the updated module: https:\/\/github.com\/Galillei\/sample_add_columns_to_order_grid\/tree\/2.3<\/a><\/p>\n
Magento 2 UI components serve for generation and display of several lists and grid types. Moreover, you can create a component yourself on the basis of the already existing code; yet the description of this mechanism is worthy of a separate article. For this one, we will focus on extending the sales order grid with an additional column.<\/p>\n
<\/a>
Magento Audit<\/h3>
Take your online store to the next level with BelVG Magento Audit<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
Actually, it’s rather simple to add a new column to a grid, unlike, for example, create a new column with filtering. So let me describe how to implement it in Magento 2.3.<\/p>\n
NB!<\/strong> The code in XML format I will put below is valid solely for versions 2.3 and further. If you still use earlier versions of Magento, I strongly advise you to migrate to Magento 2.<\/p>\n
All the directives are situated in the <module>\/view\/adminhtml\/ui_component\/<\/em> directory. First, create a “sales_order_grid.xml<\/em>” file. The filename has to match a parent component that we will extend.<\/p>\n
Let’s add the following code into the file:<\/p>\n
<code>\r\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<listing xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\r\n        xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\r\n   <columns name=\"sales_order_columns\">\r\n       <column name=\"rics_status\" class=\"Belvg\\ColumnToOrderGrid\\Ui\\Component\\Columns\\OrderGrid\">\r\n           <settings>\r\n               <filter>select<\/filter>\r\n               <options class=\"Belvg\\ColumnToOrderGrid\\Model\\Config\\Statuses\"\/>\r\n               <visible>true<\/visible>\r\n               <dataType>select<\/dataType>\r\n               <label translate=\"true\">Example column<\/label>\r\n               <bodyTmpl>ui\/grid\/cells\/html<\/bodyTmpl>\r\n               <sortable>false<\/sortable>\r\n           <\/settings>\r\n       <\/column>\r\n   <\/columns>\r\n<\/listing>\r\n<\/code>\r\n<\/pre>\n
Let me break this piece of code down.<\/p>\n
The line<\/p>\n
<code>\r\n <column name=\"rics_status\" class=\"Belvg\\ColumnToOrderGrid\\Ui\\Component\\Columns\\OrderGrid\">\r\n<\/code\r\n<\/pre>\n
adds a column into the order grid. Class Module\\Ui\\Component\\Columns\\OrderGrid<\/em> extends the Magento\\Ui\\Component\\Listing\\Columns\\Column<\/em> class.<\/p>\n
We need to override the prepareDataSource()<\/em> method:<\/p>\n
<code>\r\npublic 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}\r\n<\/code>\r\n<\/pre>\n
 $item<\/em> variable stores current grid row data, and the column name is available in the “name” array element:<\/p>\n
<code>\r\n$item[$this->getData('name')] = $value;\r\n<\/code>\r\n<\/pre>\n
This way we can fill the row data.<\/p>\n
Let’s now return to the sales_order_grid.xml<\/em> file. All the code written in the argument line and below is related to the column description.<\/p>\n
<code>\r\n<bodyTmpl>ui\/grid\/cells\/html<\/bodyTmpl>\r\n<\/code>\r\n<\/pre>\n
The following line allows us to 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 module-ui.<\/p>\n
In the following example the component isn’t specified, but we can additionally specify the column component in argument tag as well:<\/p>\n
<code>\r\n<column name=\"created_at\" class=\"Magento\\Ui\\Component\\Listing\\Columns\\Date\" component=\"Magento_Ui\/js\/grid\/columns\/date\" sortOrder=\"30\">\r\n<\/code>\r\n<\/pre>\n
NB!<\/strong> In the earlier versions of Magento the component was installed in a different way:<\/p>\n
<code>\r\n<item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/date<\/item>\r\n<\/code>\r\n<\/pre>\n
The type of column (date, column, actions, multiselect, select or thumbnail) to use is defined by the component. Both templates and components are placed in the module-ui. At this stage, there is already a column in the order grid and the task is completed. However, if you require filtering by this column, we will proceed to work.<\/p>\n
There are 2 solutions:<\/p>\n