I need to build a list of shipping number link.

I have finished build the html of the list.

But instead of rendering html. It ouputs the content including html text.

enter image description here

This is my code to render source for that column:

public function prepareDataSource(array $dataSource)
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as & $item) {
            if (isset($item['entity_id'])) {

                /** @var  \Magento\Sales\Model\Order $order */
                $order = $this->_orderFactory->create()->load($item['entity_id']);
                $trackCollection = $order->getTracksCollection();

                $str = "";
                foreach ($trackCollection as $trackItem) {
                    if ($trackItem->isCustom()) {
                        $str .= $trackItem->getNumber() . ", ";
                    } else {

                        $str .= '<a href="#" onclick="popWin(\'' . $this->_shippingHelper->getTrackingPopupUrlBySalesModel($trackItem) .
                            '\',\'trackorder\',\'width=800,height=600,resizable=yes,scrollbars=yes\')">' . $trackItem->getNumber() . '</a>';
                        $str .= '<div id="shipment_tracking_info_response_' . $trackItem->getId() . '"></div>';

                        $str .= ", ";
                $str = rtrim($str, ", ");
                $item[$this->getData('name')] = $str;

    return $dataSource;

Is there any problem with my code ?

2 Answers 2


After a a while of digging to magento core code, i firgured that out.

Add this line to column declaration:

<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

like so:

 <column name="shipping_number" class="Eyemagine\Frogfish\Ui\Component\Listing\Column\ShippingNumber">
        <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="filter" xsi:type="string">text</item>
                <item name="sortOrder" xsi:type="number">100</item>
                <item name="label" xsi:type="string" translate="true">Shipping Number</item>

You could also write:

<column name="shipping_number" class="Eyemagine\Frogfish\Ui\Component\Listing\Column\ShippingNumber"
      <label translate="true">Shipping Number</label>

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.