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.stack.imgur.com/0PFln.png

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

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;
  }

}