0

In administration Orders Grid, I added a custom column containing telephone. I used a custom extension for this and it causes order toolbar to disappear somehow enter image description here

Here's the module code:

etc/adminhtml/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="custom_orders_grid" type="Company\Module\Plugin\OrdersGrid" sortOrder="10"/>
    </type>
</config>

Plugin/OrdersGrid.php <?php namespace Company\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']
            );
        }

        return $collection;
    }
}

view/adminhtml/ui_component/sales_order_grid.xml

<?xml version="1.0"?>
<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="telephone">
            <settings>
                <filter>text</filter>
                <label translate="true">Phone</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>

    </columns>
</listing>

Is there something I can do to fix this?

3 Answers 3

1

To do the same first we need to create a sales_order_grid.xml file at this path using below code. app\code\Vendor\Extension\view\adminhtml\ui_component\sales_order_grid.xml

<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="newfield" class="Vendor\Extension\Ui\Component\Listing\Column\Newcolumn">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">New Column</item>
                </item>
            </argument>
         </column>
       </columns>
</listing>

Now you have to create one more file Newcolumn.php at following location. app\code\Vendor\Extension\Ui\Component\Listing\Column\Newcolumn.php

<?php
namespace Vendor\Extension\Ui\Component\Listing\Column;
 
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
 
use Magento\Framework\Pricing\PriceCurrencyInterface;
 
class Newcolumn extends Column
{
    protected $_orderRepository;
    protected $_searchCriteria;
 
    public function __construct(
        PriceCurrencyInterface $priceCurrency,
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        OrderRepositoryInterface $orderRepository,
        SearchCriteriaBuilder $criteria,
        array $components = [],
        array $data = [])
    {
        $this->_orderRepository = $orderRepository;
        $this->_searchCriteria  = $criteria;
 
        $this->priceCurrency = $priceCurrency;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $order  = $this->_orderRepository->get($item["entity_id"]);
                $item[$this->getData('name')] = $order->getData("newfield");
            }
        }
        return $dataSource;
    }
}

That’s it, now clear the cache and you will able to see newly added comment in backend sales order grid view. You are free add multiple custom column using above code.

1
  • Can you edit your code, using Telephone as data for the new column?
    – zekia
    Nov 5, 2021 at 15:16
1

It's not ok to use $this->_orderRepository->get inside loop. That action will slow down your grid loading speed.

You can do this way:

  1. Add phone number column to sales_order_grid table. For this create db_schema.xml file in etc directory of your module and add (in case you need shipping phone number):
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
    <table name="sales_order_grid" resource="sales" engine="innodb" comment="Sales Flat Order Grid">
        <column xsi:type="varchar" name="phone" nullable="true" length="255" comment="Ship Phone"/>
    </table>
</schema>
  1. Then in di.xml file (etc folder) add following code
<virtualType name="Magento\Sales\Model\ResourceModel\Order\Grid" type="ProperXT\Sales\Model\ResourceModel\Grid">
    <arguments>
        <argument name="columns" xsi:type="array">
            <item name="phone" xsi:type="string">sales_shipping_address.telephone</item>
        </argument>
    </arguments>
</virtualType>
  1. Add phone to Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<column name="phone" class="Vendor\Module\Ui\Component\Listing\Order\Columns\Phone">
            <settings>
                <label translate="true">Phone</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <sortable>true</sortable>
            </settings>
        </column>
  1. Create Vendor\Module\Ui\Component\Listing\Order\Columns\Phone class
<?php


namespace Vendor\Module\Ui\Component\Listing\Order\Columns;


class Phone extends \Magento\Ui\Component\Listing\Columns\Column
{
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as &$item) {
                if (isset($item[$fieldName])) {
                    $item[$fieldName] = $this->getHtml($item[$fieldName]);
                }
            }
        }
        return $dataSource;
    }

    private function getHtml($phone)
    {
        return "<a href='tel:$phone'>$phone</a>";
    }
}
0

Solution is to add <listingToolbar name="listing_top"/> in sales_order_grid.xml. So it finally looks like this:

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    
    <listingToolbar name="listing_top"/> 

    <columns name="sales_order_columns">
        <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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.