How to Add Column with Filter to Magento 2 Orders Grid?

0
470
How to Add Column with Filter to Magento 2 Orders Grid? | MageWorx Magento Blog
Reading Time: 6 minutes

Often, Magento 2 stores administrators require extra options when it comes to using and customizing the orders grid ― filtering based on a specific out-of-the-box parameter can become a real challenge.

Recently, a Magento Developer reached me out with a question. He tried to expand the orders grid on Magento 2.3.1. The old posts available on the web didn’t help out ― naturally, much has changed in Magento since last two years.

Based on his question, I offer you to take a look at the solution for a specific case:

We need to add a column ― with some regional code of a customer who completed a purchase ― to the orders grid. Additionally, a store administrator must have a possibility to filter orders by this newly added column.

It might seem easy, but there are a couple of things worth paying attention to. For example, a shopper who made a purchase may not have any delivery address ― in case of a virtual order. Or, how shall we list the regions? All this should be taken into consideration when getting down to development. Based on the questions mentioned earlier, let’s assume:

  • virtual products won’t have a delivery region (‘null’). This will help you choose them based on this parameter,
  • regions will be listed and have a look of codes without their transformation into labels, just as it is in the default Magento 2.

*Please note that at the end of this article there will be a link to the module with open access on GitHub. Though, I do include the link in this paragraph if you do not manage to finish this article: https://github.com/mageworx/articles-extended-orders-grid.

However, despite the lack of time, I do encourage you to read on.😊

Thus, to add a new column to the orders grid, you need to:

1. Create a new module

First, let’s decide on the module and vendor names. Well, no need for me to choose a vendor name ― it’s MageWorx (as if I have a choice, just kidding). I still get to choose the module name. Let it be ExtendedOrdersGrid (btw we have a same-name extension for Magento 2). In fact, using MageWorx as a vendor name in the namespace does not give you the right to request free support. Anyways, if our support team members had a good weekend, you can still give it a try on Monday.😉

Let’s create the following directory: app/code/MageWorx/ExtendedOrdersGrid. To register a module, we will need some standard files:

It is important to note that I’ve cut the copyright that gets added in my IDE automatically. Thus, you get to use this code with no trouble. 😏

Then, run a few commands:

And voila! Now, our module can be seen in Magento 2! Oh, if you work on a remote server, do not forget to transfer the files before testing.

2. Add a column to the grid

Then, using Magento 2 UI, let’s add a new column to the standard grid. For that, create a file:

with the following content (its meaning we will discuss further):

Here, you need to specify that the name is not taken out of anywhere. For experienced developers, this is clear, but for those who only get to know Magento 2, I’ll add some explanations at the end of this paragraph.

We used a standard columns node to add columns to the grid, where a new column under ‘code’ name shall be added as well. Next, let’s write the attributes of our column in the grid:

1) Component. This is a JS class that is responsible for the creation and processing of this column. It is located in the Magento_Ui module at the following address:

vendor/magento/module-ui/view/base/web/js/grid/columns/column.js

In fact, if you are a curious developer, take a look at other realizations as well. There is a lot of exciting stuff out there.

2) Label. This is a line with a column name, which will be displayed to an end user. Don’t forget to add it to the i18n localization file, if the translate property has been established. 😉

3) SortOrder. This is the column position in the grid. If the module has been installed on Magento 2 that has never been managed by a store administrator, it will have an effect. Otherwise, on Magento 2 that is being used, our column will get added to the end of the list no matter what we do.

4) Align. This means aligning the column content. I guess that’s clear.

5) DataType. This is a data type we will manipulate. In our case, that’s simply a line of text. However, it can be a list or a Boolean value, as well as numbers if we talk about products quantity, for instance.

6) Visible. This is nothing else but the column visibility though much depends on whether the grid was previously used or not.

All data about the grid is stored in the Magento database, in the ui_bookmark table. Thus, if there is no record about our column for the modified grid at the time of our module installation, don’t expect any miracle.

7) Filter. This is the filter type. Here, we specified that filtering should be done as with regular text. While running code, it will transform into the MySQL LIKE %value% condition.


Explanations

To make the long story short, the name of the extended UI component must correspond to the name of the original. In our case, it is vendor/magento/module-sales/view/adminhtml/ui_component/sales_order_grid.xml, and it’s calculated from the view/adminhtml/ui_component/sales_order_grid.xml module root.

UI grid itself gets added to the required controller using vendor/magento/module-sales/view/adminhtml/layout/sales_order_index.xml layout  just as follows:

This means *add this UI component under sales_order_grid name to the page content* ― just as in case of blocks. However, instead of blocks, we’ve got uiComponent with its attributes and limitations.


Now, clear Magento 2 cache using the following command:

and check the results in the orders grid:

How to Add Column with Filter to Magento 2 Orders Grid? | MageWorx Magento Blog

3. Add data to the column

You might have noticed that the column has appeared, but its content looks not just as expected…there is no data displayed there at all. Fair enough, we didn’t add anything, thus no content there.

Let’s get down to writing a simple plugin that will help you fill in our column. For that, let’s catch the grid collection query, make a join within the required table and grid. The plugin will look just as follows:

It will refer to the following class:

Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory

The plugin runs the following way:

As it will catch absolutely all collections, let’s add validation to the required sales_order_grid table. When it gets found and Magento attempts to obtain data on this, we make a join of the table with sales_order_address address byorder_id (entity_id in the sales_order_grid table and parent_id in the sales_order_address table (soa alias)). Now, we’ve got access to the customer’s order delivery address data, which we can use to determine region_id. It is located as a number in the sales_order_address table. This number corresponds to the index in the directory_country_region table (dcrt alias). As we need this regional code from the table as mentioned above, let’s connect the ‘code’ column. This precise column will get output (corresponds to the column value in sales_order_grid.xml).

Then, clear cache:

Log in the admin panel to the orders grid. If everything has been done correctly, we will see our regional codes displayed:

How to Add Column with Filter to Magento 2 Orders Grid? | MageWorx Magento Blog

Free access to the module is available on GitHub: https://github.com/mageworx/articles-extended-orders-grid.

Important sidenote!

To add any data to this column, it is required to get ‘your_column_name’ column and all the needed data added when creating a collection. That is, you need to do something different ― replace the table name and write your own join. Also, don’t forget to edit the column name in the sales_order_grid.xml file if required.


I guess that’s it. Should you have any questions or requests, please leave a comment in the comment field.

LEAVE A REPLY

Please enter your comment!
Please enter your name here