A snippet is actually just a QWeb view that gets injected in the Insert blocks bar, which is defined by a QWeb view itself:
- Add a file called views/snippets.xml:
<?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="book_snippet" inherit_id="website.snippets"> <!-- points 2, 3 go here /--> </template> </odoo>
- Add a view for your snippet:
<xpath expr="//div[@id='snippet_feature']/div[hasclass('o_panel_body')]" position="inside"> <div> <div class="oe_snippet_thumbnail"> <div style="background: white; box-shadow:none"
class="oe_snippet_thumbnail_img"> <i class="fa fa-book fa-5x text-muted" /> </div> <span class="oe_snippet_thumbnail_title">
Latest books
</span> </div> <div class="oe_snippet_body book_snippet"> <section class="container"> <h2>Latest books</h2> <table class="table"> <tr> <th>Name</th> <th>Release date</th> </tr> </table> </section> </div> </div> </xpath>
- Add options:
<xpath expr="//div[@id='snippet_options']" position="inside"> <div data-selector=".book_snippet"> <li class="dropdown-submenu"> <a href="#">Show books</a> <ul class="dropdown-menu"> <li data-select-class="book_snippet-show3"> <a>3</a> </li> <li data-select-class="book_snippet-show5"> <a>5</a> </li> <li data-select-class="book_snippet-show10"> <a>10</a> </li> <li data-select-class="book_snippet-show15"> <a>15</a> </li> </ul> </li> </div> <div data-selector=".book_snippet table"> <li class="dropdown-submenu"> <a href="#">Table style</a> <ul class="dropdown-menu"> <li data-toggle-class="table-striped"> <a>Striped</a></li> <li data-toggle-class="table-bordered"> <a>Bordered</a></li> <li data-toggle-class="table-condensed"> <a>Condensed</a> </li> </ul> </li> </div> </xpath>
- Add JavaScript code to populate our snippet:
odoo.define('r3_snippets', function(require)
{
"use strict";
var rpc = require('web.rpc'),
Animation = require('website.content.snippets.animation');
Animation.registry.book_snippet = Animation.Class.extend({
selector: '.book_snippet',
start: function()
{
var self = this,
number = 3;
_.each(this.$el.attr('class').split(/s+/), function(cls)
{
if(cls.indexOf('book_snippet-show') == 0)
{
number = parseInt(cls.substring(
'book_snippet-show'.length));
}
});
this.$el.find('td').parents('tr').remove();
rpc.query({
model: 'library.book',
method: 'search_read',
domain: [],
fields: ['name', 'date_release'],
sortBy: ['date_release desc'],
limit: number,
})
.then(function(data)
{
var $table = self.$el.find('table');
_.each(data, function(book)
{
$table.append(
jQuery('<tr />')
.append(
jQuery('<td />').text(book.name),
jQuery('<td />').text(book.date_release)
)
);
})
});
},
});
});
After updating your module, you're offered a snippet called Latest books, which shows a configurable amount of books in a list, ordered by their publication date.