Magento2 : Make custom link clickable in Catalog

Question

I am working on admin product grid (Products > catalog).

As you can see from the picture, I am able to display my custom attribute value which is a file input for products. Specs PDF column is basically a link to pdf file stored in media.

When I click on the PDF link, it doesnt open link but goes to product edit area. Even though link & html for the link is right, Magento 2.1 doesnt bind click event of the link with its href.

I am not sure how can I make it work. (Magento 2.1)

What I have done so far

My product_listing.xml in my custom module Tto/Custom/view/adminhtml/ui_component/product_listing.xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="product_columns">
        <column name="product_specs_pdf" class="Tto\Custom\Ui\Component\Listing\Column\ProductSpecsPDF">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Specs PDF</item> 
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

In class Tto\Custom\Ui\Component\Listing\Column\ProductSpecsPDF method prepareDataSource help me to get the proper link.

 /**
 * Prepare Data Source
 *
 * @param array $dataSource
 * @return array
 */
public function prepareDataSource(array $dataSource)
{   
    $this->logger->debug('------------ prepareDataSource --------------');
    $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    if (isset($dataSource['data']['items'])) {  
       
       
        foreach ($dataSource['data']['items'] as & $item) {
            $this->logger->debug('item', array( 'arr' => $item ) );
            
            // get the product object from repository
            $product = $this->productRepository->getByID( $item['entity_id'] );
            // get all attributes
            $attributes = $product->getAttributes();
            // check if we have attributes
            if( $attributes ){  
                //go through the loop
                foreach( $attributes as $key => $val ){
                    // check if we have product_specs_pdf
                    if( $key === 'product_specs_pdf' ){

                        // get the value
                        $file = $product->getData( $key );
                       
                        $url = false;
                        if ( !empty( $file ) ) {
                            $url = $this->_storeManager->getStore( $product->getStore() )
                                    ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)
                                . 'catalog/product/productspecs' . $file;
                            
                            $item[$this->getData('name')] = '<a href="'.$url.'" target="_blank">PDF</a>';
                            
                        }

                    }
                }
                
            }
            
        }

    }
    return $dataSource;
}

So the question is what else I need to do to make the link click-able?

Answer 1

You can bind an onclick event for your url, it'll override Magento js behavior, which make your url unclickable. Something like this should work:

$item[$this->getData('name')] = '<a onclick="window.open(\''.$url.'\',\'_blank\');"  href="'.$url.'">PDF</a>';