Change shipping address column format in Sales Order Grid (Magento 2.4.2)

Question

Where do I change the column shipping address format in the Sales => Order => Grid in Magento 2.4.2? I need to have the post code/zip code in front of the city. "Stan" and "99999" should swap position and be on a new line.

Also, I want to remove the order grid linking, we only want to use the "View" link.

Thank you very much,

Update! Image describing the sales grid row linking issue. Is it possible to remove the row linking in sales => orders in Magento 2, and only use the action "View" link instead? Update!

Image Grid Row Linking Issue

Address Formatting Issue

Update #2 @Prince

Should i remove the following whole part ...

<settings>
<childDefaults>
<param name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">sales_order_grid.sales_order_grid.sales_order_columns.actions</item>
<item name="target" xsi:type="string">applyAction</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">view</item>
<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</param>
</childDefaults>
</settings>

... and replace with:

<settings>
<childDefaults>
<param name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">false</item>
</param>
</childDefaults>
</settings>

... to remove sales order grid linking?

Answer 1

As per your requirement you need to create four new columns for the city, street, zip, and phone.

1. So first of all create sales_order_grid.xml in your custom module

app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml

<?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">
        <settings>
            <childDefaults>
                <param name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">false</item>
                </param>
            </childDefaults>
        </settings>
        <column name="street">
            <settings>
                <filter>text</filter>
                <label translate="true">Street</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="postcode">
            <settings>
                <filter>text</filter>
                <label translate="true">Zip</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="city">
            <settings>
                <filter>text</filter>
                <label translate="true">City</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="telephone">
            <settings>
                <filter>text</filter>
                <label translate="true">Phone</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
    </columns>
</listing>

2. Create plugin for order collection data provider

app/code/Vendor/Module/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <plugin name="mageprince_custom_orders_grid" type="Vendor\Module\Plugin\OrdersGrid" sortOrder="10"/>
    </type>
</config>

app/code/Vendor/Module/Plugin/OrdersGrid.php

<?php

namespace Vendor\Module\Plugin;

class OrdersGrid
{
    public function afterGetReport($subject, $collection, $requestName)
    {
        if ($requestName !== 'sales_order_grid_data_source') {
            return $collection;
        }

        if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) {
            $orderAddressTable  = $collection->getResource()->getTable('sales_order_address');

            $collection->getSelect()->joinLeft(
                ['oat' => $orderAddressTable],
                'oat.parent_id = main_table.entity_id AND oat.address_type = \'shipping\'',
                ['telephone', 'city', 'postcode', 'street']
            );
        }

        return $collection;
    }
}

That's it now you can see these columns in order grid as below

EDIT:

I have removed datasource class and updated the answer because datasource class not working with filters.

Answer 2

The screen you show us is reliant on an order observer. When the order is successfully placed,

the event below is triggered and this will record the shipping address value as it appears in your order grid.

<event name="sales_order_process_relation">
        <observer name="sales_grid_order_sync_insert" instance="SalesOrderIndexGridSyncInsert" />
    </event>

For this observer to use a different format, you may create a custom module and in etc folder create a di.xml with the following content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="ShippingAddressAggregatorPostCodeBeforeCity" type="Magento\Framework\DB\Sql\ConcatExpression">
        <arguments>
            <argument name="columns" xsi:type="array">
                <item name="company" xsi:type="array">
                    <item name="tableAlias" xsi:type="string">sales_shipping_address</item>
                    <item name="columnName" xsi:type="string">company</item>
                </item>
                <item name="street" xsi:type="array">
                    <item name="tableAlias" xsi:type="string">sales_shipping_address</item>
                    <item name="columnName" xsi:type="string">street</item>
                </item>
                <item name="postcode" xsi:type="array">
                    <item name="tableAlias" xsi:type="string">sales_shipping_address</item>
                    <item name="columnName" xsi:type="string">postcode</item>
                </item>
                <item name="city" xsi:type="array">
                    <item name="tableAlias" xsi:type="string">sales_shipping_address</item>
                    <item name="columnName" xsi:type="string">city</item>
                </item>
                <item name="region" xsi:type="array">
                    <item name="tableAlias" xsi:type="string">sales_shipping_address</item>
                    <item name="columnName" xsi:type="string">region</item>
                </item>
            </argument>
            <argument name="separator" xsi:type="string">, </argument>
        </arguments>
    </virtualType>
    <virtualType name="Magento\Sales\Model\ResourceModel\Order\Grid" type="Magento\Sales\Model\ResourceModel\Grid">
        <arguments>
            <argument name="columns" xsi:type="array">
                <item name="shipping_address" xsi:type="object">ShippingAddressAggregatorPostCodeBeforeCity</item>
            </argument>
        </arguments>
    </virtualType>
</config>

finally, install the custom module. The orders that you will place after your new module is working will use the new format. The previous orders will remain with the previous format.

If you need the previous orders to be formatted correctly, it would be possible to use a command-line and apply a similar process

repository

Answer 3

try https://docs.magento.com/user-guide/customers/address-templates.html

If doesn't help you need to do it trough custom code