Magento2 - Changes the color of the order status column in the UI grid

By vijayrami

Monday, December 27, 2021

Share :

Tweet

Magento UI, Magento2, Magento2 grid,

In this post we will check how to Changes the color of the order status column in the UI grid, based on the current status of the order.

You can find complete module on Github at Magelearn_OrderStatusColor

Let's start it by creating custom module.

Create folder inside app/code/Magelearn/OrderStatusColor

Add registration.php file in it:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magelearn_OrderStatusColor',
    __DIR__
);

Add composer.json file in it:

{
    "name": "magelearn/module-orderstatuscolor",
    "description": "Changes the color of the order status column in the UI grid, based on the current status of the order.",
    "type": "magento2-module",
    "version": "1.0.1",
    "license": "proprietary",
    "authors": [
        {
            "name": "Vijay Rami",
            "email": "vijaymrami@gmail.com"
        }
    ],
    "minimum-stability": "dev",
    "require": {},
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Magelearn\\OrderStatusColor\\": ""
        }
    }
}

Add etc/module.xml file in it:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magelearn_OrderStatusColor" setup_version="1.0.0">
    </module>
</config>

Now we will modify ui_component xml file and give our custom class path 

add app/code/Magelearn/OrderStatusColor/view/adminhtml/ui_component/sales_order_grid.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<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="status" component="Magelearn_OrderStatusColor/js/grid/columns/select">
            <settings>
                <filter>select</filter>
                <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/>
                <dataType>select</dataType>
                <label translate="true">Status</label>
            </settings>
        </column>
    </columns>
</listing>

Now as per highlighted code above, we will add our JS file at app/code/Magelearn/OrderStatusColor/view/adminhtml/web/js/grid/columns/select.js

/**
 * Copyright © Mateus, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

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

    return Column.extend({
        defaults: {
            bodyTmpl: 'Magelearn_OrderStatusColor/ui/grid/cells/text'
        },
        getOrderStatusColor: function (row) {
            if (row.status == 'pending') {
                return 'order-pending';
            } else if (row.status == 'processing') {
                return 'order-processing';
            } else if (row.status == 'complete') {
                return 'order-complete';
            } else if (row.status == 'closed' || row.status == 'canceled') {
                return 'order-closed';
            } else {
                return 'order-default';
            }
        }
    });
});

And as per defined in above highlighted code, we will add our template file at app/code/Magelearn/OrderStatusColor/view/adminhtml/web/template/ui/grid/cells/text.html

<div class="data-grid-cell-content" data-bind="attr: { class: $col.getOrderStatusColor($row()) }" text="$col.getLabel($row())"></div>

At last, we will also add our css file at app/code/Magelearn/OrderStatusColor/view/adminhtml/web/css/source/_module.less

And import app/code/Magelearn/OrderStatusColor/view/adminhtml/web/css/source/_colors.less in it.

Tag : Magento UI, Magento2, Magento2 grid