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>
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;
}
});
});
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;
}
});
});
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>
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>
app/design/adminhtml/Vendor/backend/Magento_Sales/web/css/custom-column.css
.custom-column-yellow {
background: #ffff00 !important;
}
.custom-column-green {
background: #006400 !important;
}
Output as follows:
Top comments (0)