DEV Community

Anuradha Fernando
Anuradha Fernando

Posted on

Add a new customized column to the grid...

You might need to add a custom column to the admin sales_order_grid. Please follow the below steps.

I've created a sample module for this. The module will be having the below file structure.

app/code/Vendor/Module/registration.php
app/code/Vendor/Module/etc/module.xml
app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
app/code/Vendor/Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js

In order to customize the 'custom-column' we should add some files to the app/design/adminhtml.

app/design/adminhtml/Vendor/backend/Magento_Sales/layout/sales_order_index.xml
app/design/adminhtml/Vendor/backend/Magento_Sales/ui_component/sales_order_grid.xml
app/design/adminhtml/Vendor/backend/Magento_Sales/web/css/custom-column.css

I'm not explaining the module creation as you all know about that part. Therefore let's take a look at the other main files such as Vendor_Module/view/adminhtml/ui_component/sales_order_grid.xml
Vendor_Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js

sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright (c)
 * See COPYING.txt for license details.
 */
-->
<listing 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="custom_column">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="has_preview" xsi:type="string">1</item>
                    <item name="label" 
xsi:type="string" translate="true">Custom Column</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>
Enter fullscreen mode Exit fullscreen mode

custom-column.js

/**
 * Copyright (c)
 * See COPYING.txt for license details.
 */

define([
    'underscore',
    'knockout',
    'Magento_Ui/js/grid/columns/select'
], function (_, ko, Select) {
    'use strict';
    return Select.extend({
        getFieldClass: function (row) {
            var computed;
            computed = ko.pureComputed(function () {
                //ADD  YOUR CODE SNIPPET HERE
                }          
            }, this);
            return computed;
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

Now let's take a practical scenario.
eg: Showing two different colors 'Green' and 'Yellow' in 'Custom Column' based on the below scenarios.

If the 'Grand Total' is greater than or equal to $50.00, the 'Custom Column' color should be 'green'. Else color should be 'Yellow'.

How we can implement this?

Edit the file: app/code/Vendor/Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js

/**
 * Copyright (c)
 * See COPYING.txt for license details.
 */

define([
    'underscore',
    'knockout',
    'Magento_Ui/js/grid/columns/select'
], function (_, ko, Select) {
    'use strict';

    return Select.extend({
        getFieldClass: function (row) {
            var computed;
            computed = ko.pureComputed(function () {
                var grandTotal = row['grand_total'].replace(/\$/g,'');
                var customColCss = {
                    'custom-column-green': ko.observable(
grandTotal >= '50.00'?true:false
),
                    'custom-column-yellow': ko.observable(
grandTotal<'50.00'?true:false
)
                }
                return customColCss;

            }, this);
            return computed;
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

app/design/adminhtml/Vendor/backend/Magento_Sales/layout/sales_order_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright (c)
 * See COPYING.txt for license details.
 */
-->
<page 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Sales::css/custom-column.css" />
    </head>
</page>
Enter fullscreen mode Exit fullscreen mode

app/design/adminhtml/Vendor/backend/Magento_Sales/ui_component/sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright (c)
 * See COPYING.txt for license details.
 */
-->
<listing 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="custom_column" component="Vendor_Module/js/ui/grid/cells/custom-column">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visibleByDefault" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">110</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>
Enter fullscreen mode Exit fullscreen mode

app/design/adminhtml/Vendor/backend/Magento_Sales/web/css/custom-column.css

.custom-column-yellow {
    background: #ffff00 !important;
}

.custom-column-green {
    background: #006400 !important;
}
Enter fullscreen mode Exit fullscreen mode

Output as follows:

Alt Text

Top comments (0)