0

I have added a custom field in sales_order table and showing it in sales_order_grid table in backend. It is working fine. I have done the following to achieve this I have added sales_order_grid.xml file in following location

\magento2\app\code\Plenty\Orders\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">
        <column name="plenty_status" class="Plenty\Orders\Ui\Component\Listing\Column\Status">
            <settings>
                <filter>select</filter>
                <options class="Plenty\Orders\Ui\Component\Listing\Column\Status\Options"/>
                <dataType>select</dataType>
                <label translate="true">Plenty Status</label>
            </settings>
        </column>
    </columns>
</listing>

Now my Status.php class that is rendering the data in the grid

\magento2\app\code\Plenty\Orders\Ui\Component\Listing\Column\Status.php class that is acting as renderer

Content of the above class

<?php
namespace Plenty\Orders\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;

class Status extends Column
{
protected $_orderRepository;
protected $_searchCriteria;

public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    OrderRepositoryInterface $orderRepository,
    SearchCriteriaBuilder $criteria,
    array $components = [],
    array $data = [])
{
    $this->_orderRepository = $orderRepository;
    $this->_searchCriteria  = $criteria;
    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"]);
            $status = $order->getData("plenty_status");

            switch ($status) {
                case \Plenty\Orders\Model\Order\Status::STATUS_NEW;
                    $plenty_status = "Order placed before plenty markets extension was installed";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_PENDING;
                    $plenty_status = "Pending";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_PROCESSING;
                    $plenty_status = "Processing";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_COMPLETE;
                    $plenty_status = "Complete";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_CANCELLED;
                    $plenty_status = "Canceled";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_UPDATED;
                    $plenty_status = "Updated";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_FAILED;
                    $plenty_status = "Failed";
                    break;          
                default:
                    $plenty_status = "Plenty Status not found";
                    break;

            }

            // $this->getData('name') returns the name of the column so in this case it would return export_status
            $item[$this->getData('name')] = $plenty_status;
        }
    }

    return $dataSource;
}

}

Everything is working fine. Statuses are showing properly in orders grid. Now my issue is I want to show different icons for different statuses. I want to use font awesome icons which is already included in my website. But when I make following changes in my code to show icons

case \Plenty\Orders\Model\Order\Status::STATUS_PENDING;
    $html .= '<i class="fa fa-clock-o pending" aria-hidden="true"></i>';
                    $statusToolTip = __('Order Synchronisation Pending');
                    break;

Then I am getting html in the orders grid also. Screenshot enter image description here

So Please guide me what I should do or try to show icons in my order grid for plenty status field.

Screenshot of what I want to achieve.enter image description here

3

I had faced similar issue like this, I'd fixed it as you can see in below Image, Please follow steps.

enter image description here

Add this line in sales_order_grid.xml => <bodyTmpl>ui/grid/cells/html</bodyTmpl>

<?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="plenty_status" class="Plenty\Orders\Ui\Component\Listing\Column\Status">
            <settings>
                <filter>select</filter>
                <options class="Plenty\Orders\Ui\Component\Listing\Column\Status\Options"/>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <dataType>select</dataType>
                <label translate="true">Plenty Status</label>
            </settings>
        </column>
    </columns>
</listing>

Also change this line in your status file app\code\Plenty\Orders\Ui\Component\Listing\Column\Status.php

$item[$this->getData('name')] = html_entity_decode($plenty_status);

<?php
namespace Plenty\Orders\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;

class Status extends Column
{
protected $_orderRepository;
protected $_searchCriteria;

public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    OrderRepositoryInterface $orderRepository,
    SearchCriteriaBuilder $criteria,
    array $components = [],
    array $data = [])
{
    $this->_orderRepository = $orderRepository;
    $this->_searchCriteria  = $criteria;
    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"]);
            $status = $order->getData("plenty_status");

            switch ($status) {
                case \Plenty\Orders\Model\Order\Status::STATUS_NEW;
                    $plenty_status = "Order placed before plenty markets extension was installed";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_PENDING;
                    $plenty_status = "Pending";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_PROCESSING;
                    $plenty_status = "Processing";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_COMPLETE;
                    $plenty_status = "Complete";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_CANCELLED;
                    $plenty_status = "Canceled";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_UPDATED;
                    $plenty_status = "Updated";
                    break;
                case \Plenty\Orders\Model\Order\Status::STATUS_FAILED;
                    $plenty_status = "Failed";
                    break;          
                default:
                    $plenty_status = "Plenty Status not found";
                    break;

            }

            // $this->getData('name') returns the name of the column so in this case it would return export_status
            $item[$this->getData('name')] = html_entity_decode($plenty_status);
        }
    }

    return $dataSource;
}

Hope this will help you. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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