magento 2 html in ui component grid column

Question

I want to add link to order in ui component grid for my custom logs table.

I was able to successfully split in lines log message with

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

but this approach does not work for anchors:

public function prepareDataSource(array $dataSource)
{
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 if (array_key_exists('order_id', $item) && !empty($item['order_id'])) {
 try {
 if ($order = $this->orderRepository->get($item['order_id'])) {
 $url = $this->storeManager->getStore()->getUrl('sales/order/view', ['order_id' => $order->getEntityId()]);
 $item[$this->getData('name')] = html_entity_decode("<a href=\"$url\">" . $order->getIncrementId() . "</a>");
 }
 } catch (\Magento\Framework\Exception\NoSuchEntityException $e) {
 }
 }
 }
 }
 return $dataSource;
}

in grid looks like https://i.sstatic.net/0PFln.png

Is there a way to not escape html entities in the UI component grid?

• sureshc: I tried below code ui commponnet admin grid HTML works fine <bodyTmpl>ui/grid/cells/html</bodyTmpl>

Answer 1

 <column name="order" class="Vendor\OrderExport\Ui\Component\Listing\Column\VendorLog\OrderId">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
 <item name="label" xsi:type="string" translate="true">Order ID</item>
 </item>
 </argument>
 </column>

Setting body template for cell fixed issue: <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

Answer 2

I had got struck in the same issue some days back, after digging for sometime, I was able to solve the issue. Please find the code below.

<?php
 namespace Evry\Creditlimit\Ui\Component\Listing\Grid\Column;
 use Magento\Framework\View\Element\UiComponent\ContextInterface;
 use Magento\Framework\View\Element\UiComponentFactory;
 use Magento\Ui\Component\Listing\Columns\Column;
 use Magento\Framework\UrlInterface;
 use \Magento\Sales\Api\Data\OrderInterface;
 class Action extends Column 
 {
 /** Url path */
 const ROW_EDIT_URL = 'sales/order/view/';
 /** @var UrlInterface */
 protected $_urlBuilder;
 protected $_orderRepository;
 protected $_storeManager;
 /**
 * @var string
 */
 private $_editUrl;
 public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 UrlInterface $urlBuilder,
 OrderInterface $orderRepository,
 StoreManagerInterface $storeManager,
 array $components = [],
 array $data = [],
 $editUrl = self::ROW_EDIT_URL
) 
{
 $this->_urlBuilder = $urlBuilder;
 $this->_editUrl = $editUrl;
 $this->_orderRepository = $orderRepository;
 $this->_storeManager = $storeManager;
 parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
 * Prepare Data Source.
 *
 * @param array $dataSource
 *
 * @return array
 */
public function prepareDataSource(array $dataSource)
{
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 try {
 if ($order = $this->_orderRepository->loadByIncrementId($item['order_id'])) {
 $url = $this->_urlBuilder->getUrl($this->_editUrl,['order_id' => $order->getEntityId()]); 
 $item[$this->getData('name')] = html_entity_decode("<a href=\"$url\" target=\"_blank\">" . $item['order_id'] . "</a>");
 }
 } catch (\Magento\Framework\Exception\NoSuchEntityException $e) {
 }
 }
 }
 return $dataSource;
 }
}

• arushi: your answer is exactly same as question, moreover this is showing anchor tag directly
• nitin hawaldar: @arushi : You probably missed something from the code. Please check the following url. I am using the same code and it is working as expected ibb.co/hyAdak