In Magento 2 how to show an image in the custom column on sales order grid
-
15-04-2021 - |
Pregunta
In Magento 2 how to show an image in the custom column on the sales order grid. I added a custom dynamic column in sales order grid Magento 2
Vendor\Module\Ui\Component\Listing\DataProvider.php
<?php
namespace Vendor\Module\Ui\Component\Listing;
use Magento\Framework\Api\FilterBuilder;
use Magento\Framework\Api\Search\ReportingInterface;
use Magento\Framework\Api\Search\SearchCriteria;
use Magento\Framework\Api\Search\SearchCriteriaBuilder;
use Magento\Framework\Api\Search\SearchResultInterface;
use Magento\Framework\App\RequestInterface;
class DataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider
{
const IMAGE_HEIGHT = '25';
const IMAGE_STYLE = 'display: block;';
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
ReportingInterface $reporting,
SearchCriteriaBuilder $searchCriteriaBuilder,
RequestInterface $request,
FilterBuilder $filterBuilder,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\Sales\Api\OrderRepositoryInterface $orderRepository,
array $meta = [],
array $data = []
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $reporting, $searchCriteriaBuilder, $request, $filterBuilder, $meta, $data);
$this->orderRepository = $orderRepository;
$this->_storeManager = $storeManager;
}
public function getData()
{
$height = self::IMAGE_HEIGHT;
$style = self::IMAGE_STYLE;
$data = parent::getData();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$collectionFlag = $objectManager->create('Vendor\Module\Model\ResourceModel\Orderflag\Collection');
foreach ($data['items'] as &$item) {
$collection = $objectManager->create('Vendor\Module\Model\ResourceModel\Ordercolumn\Collection')
->addFieldToSelect(array('column_id','column_name'));
if($collection->getSize()){
foreach( $collection as $column){
foreach($collectionFlag as $flagValue) {
$srcImage = $this->_storeManager->getStore()
->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) .$flagValue->getData('image_icon');
$image = sprintf("<img src='".$srcImage."' height='".$height."'>");
if($column->getData('column_id') == $flagValue->getData('column_name')):
$item[$column->getData('column_id')] = $image;
//echo $item[$column->getData('column_id')];
else:
$item[$column->getData('column_id')]= 'N/A';
endif;
}
}
}
}
return $data;
}
}
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">
<dataSource name="sales_order_grid_data_source">
<dataProvider class="Vendor\Module\Ui\Component\Listing\DataProvider" name="sales_order_grid_data_source" />
</dataSource>
<columns name="sales_order_columns" class="Vendor\Module\Ui\Component\Listing\Columns" />
</listing>
Vendor\Module\Ui\Component\Listing\Columns.php
<?php
namespace Vendor\Module\Ui\Component\Listing;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Vendor\Module\Ui\Component\Listing\Column\CustomColumnCreator;
class Columns extends \Magento\Ui\Component\Listing\Columns
{
/**
* @var CustomColumnCreator
*/
private $columnCreator;
public function __construct(
ContextInterface $context,
CustomColumnCreator $columnCreator,
array $components = [],
array $data = []
) {
parent::__construct($context, $components, $data);
$this->columnCreator = $columnCreator;
}
public function prepare()
{
$billingNameColumn = $this->components['billing_name'];
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$collection = $objectManager->create('Vendor\Module\Model\ResourceModel\Ordercolumn\Collection')
->addFieldToSelect(array('column_id','column_name'));
if($collection->getSize()){
foreach ( $collection as $flag){
$column = $this->columnCreator->addColumnFromExistingColumn(
$billingNameColumn,
$flag->getData('column_id'),
$flag->getData('column_name'),
11
);
$this->addComponent($flag->getData('column_id'), $column);
}
}
parent::prepare();
}
}
I added a custom dynamic column in sales order grid Magento 2
Reference: Add custom dynamic column in sales order grid Magento 2
Solución
In the class \Mbs\SalesGrid\Ui\Component\Listing\Column\CustomColumnCreator,
you need to look for the function addColumnFromExistingColumn
then, change this function from
public function addColumnFromExistingColumn(
\Magento\Framework\View\Element\UiComponentInterface $existingColumn,
$columnName,
$label,
$sortOrder
) {
$config = $existingColumn->getConfiguration();
$config['label'] = $label;
$arguments = [
'data' => [
'config' => $config,
'sortOrder' => $sortOrder
],
'context' => $existingColumn->getContext(),
];
return $this->componentFactory->create($columnName, 'column', $arguments);
}
to
public function addColumnFromExistingColumn(
\Magento\Framework\View\Element\UiComponentInterface $existingColumn,
$columnName,
$label,
$sortOrder
) {
$config = $existingColumn->getConfiguration();
$config['label'] = $label;
$config['bodyTmpl'] = 'ui/grid/cells/html';
$arguments = [
'data' => [
'config' => $config,
'sortOrder' => $sortOrder
],
'context' => $existingColumn->getContext(),
];
return $this->componentFactory->create($columnName, 'column', $arguments);
}
If you use this function on several columns, do let me know and I can adjust something more subtil. Good luck
Otros consejos
Follow this below steps :
Create sales_order_grid.xml file at app/code/Vendor/Module/view/adminhtml/ui_component/ and add this below code :
<?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="logo" class="Vendor\Module\Ui\Component\Logo">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="label" xsi:type="string" translate="true">Logo</item>
<item name="altField" xsi:type="string">title</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="sortOrder" xsi:type="number">30</item>
</item>
</argument>
</column>
</columns>
</listing>
Create Logo.php file at app/code/Vendor/Module/Ui/Component/ and add this below code :
<?php
declare (strict_types = 1);
namespace Vendor\Module\Ui\Component;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;
class Logo extends Column
{
const ALT_FIELD = 'title';
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @var \Magento\Catalog\Helper\Image
*/
protected $imageHelper;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param StoreManagerInterface $storeManager
* @param \Magento\Catalog\Helper\Image $imageHelper
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
StoreManagerInterface $storeManager,
\Magento\Catalog\Helper\Image $imageHelper,
array $components = [],
array $data = []
) {
$this->storeManager = $storeManager;
$this->imageHelper = $imageHelper;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* @param array $dataSource
*
* @return array
*/
public function prepareDataSource(array $dataSource): array
{
parent::prepareDataSource($dataSource);
if (isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as &$item) {
$url = '';
if (isset($item[$fieldName])) {
if ($item[$fieldName] != '') {
$url = $this->storeManager->getStore()->getBaseUrl(
\Magento\Framework\UrlInterface::URL_TYPE_MEDIA
) . "catalog/product/custom" . $item[$fieldName];
} else {
$url = $this->imageHelper->getDefaultPlaceholderUrl('small_image');
}
} else {
$url = $this->imageHelper->getDefaultPlaceholderUrl('small_image');
}
$item[$fieldName . '_src'] = $url;
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
$item[$fieldName . '_orig_src'] = $url;
}
}
return $dataSource;
}
protected function getAlt($row)
{
$altField = $this->getData('config/altField') ?: self::ALT_FIELD;
return isset($row[$altField]) ? $row[$altField] : null;
}
}
Here, I used code like that if your image will not available then, placeholder image will be display.
catalog/product/custom => you can add your image directory here.
Output :
Reference : Click Here
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="imagedata" class="Vendorename\ModuleName\Ui\Component\ImageData">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="altField" xsi:type="string">store image</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Image</item>
<item name="sortOrder" xsi:type="number">80</item>
</item>
</argument>
</column>
</columns>
</listing>
app/code/Vendorename/Modulename/Ui/Component/
ImageData.php
<?php
declare (strict_types = 1);
namespace Vendorename\Modulename\Ui\Component;
use Magento\Ui\Component\Listing\Columns\Column;
class ImageData extends Column
{
/**
* @param array $dataSource
*
* @return array
*/
public function prepareDataSource(array $dataSource): array
{
parent::prepareDataSource($dataSource);
if (!isset($dataSource['data']['items'])) {
return $dataSource;
}
foreach ($dataSource['data']['items'] as &$item) {
$item[$this->getData('name') . '_src'] = "https://homepages.cae.wisc.edu/~ece533/images/watch.png";
$item[$this->getData('name') . '_alt'] = "Image name";
$item[$this->getData('name') . '_orig_src'] = "https://homepages.cae.wisc.edu/~ece533/images/watch.png";
}
return $dataSource;
}
}
I Hope This Helps You.