Sunday, 27 September 2015

How to show Thumbnail image in list view? | Odoo

In sale order line when i select a product it should auto-populate the product image as well. I achieved this functionality to auto-populate the image. And this image is displaying as widget until in form view of sale order line. But once when i click on "save and close" on sale order line form, in the list view of sale order it is showing as some Download(size) like thing. Even i specified as widget="image" in tree view of order line.
Now I want to show this image as widget in list view also.


List view is designed in such a way that will show all binary files as Download(size) format irrespective of the file type and widget specified. To achieve this I have modified the code in web module directly. we can also create module for that.

The code to be added is:
The file need to be modified is: /addons/web/static/src/js/view_list.js:

Line 2066:
'button': 'instance.web.list.Button', +'field.image': 'instance.web.list.FieldBinaryImage', 'field.many2onebutton': 'instance.web.list.Many2OneButton',

Line 2230:
            href: download_url,
            size: instance.web.binary_to_binsize(value),
        });
    }
});
+
+instance.web.list.FieldBinaryImage = instance.web.list.Column.extend({</br>
+       /**
+     * Return a image to the binary field of specified as widget image</br>
+    *
+     * @private
+     */
+    _format: function (row_data, options) {
+            var placeholder= "/web/static/src/img/placeholder.png";
+        var value = row_data[this.id].value;
+        var download_url;
+        if (value && value.substr(0, 10).indexOf(' ') == -1) {
+            download_url = "data:image/png;base64," + value;
+       }
+        else {
+               download_url = placeholder;
+        }
+
+       return _.template('<image src="<%-src%>" width="30px" height="30px"/>', {
+            src: download_url,
+       });
+    }
+});
+
instance.web.list.ProgressBar = instance.web.list.Column.extend({
/**
* Return a formatted progress bar display
*
* @private
*/
_format: function (row_data, options) {

Note:
When you are trying this code to acheive functionality, don't forget to specifywidget="image" in view definition and in this post it is not allowing me to add image tag in code it is converting into image icon.

return _.template('Image tag with src="<%-src%>" and width as 30px and height as 30 px', {