How to create links on the column of table in SAPUI5

A simple example how to create links on table columns is based on Link – Subtle example.

1. In the /mockdata/products.json for each ‘ProductPicUrl’ field value remove a host name 'https://openui5.hana.ondemand.com'.

2. As a result the link in the column has got a host of the dev server, eg is 'http://localhost:8081/test-resources/sap/ui/documentation/sdk/images/HT-2001.jpg'

3. In the Link.view.xml view change the first column content by adding
   a formatter function see Walkthrough Step 22: Custom Formatters:

   <ColumnListItem>
     <Link
       text="{Name}"
       href="{
         path: 'ProductPicUrl',
         formatter: '.hrefFormatter'
       }" />
   

4. And implement the formatter in the Link.view.xml controller file:

   hrefFormatter: function(sUrl) {
       var mainUrl="https://openui5.hana.ondemand.com";
       return mainUrl + sUrl;
   }
   

5. Using the formatter provides modified link URL: 'https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg'