Chapter 10 - Odoo 15 Development Book

Dynamic Snippets

Snippets are UI building blocks for odoo website builder. Snippets are the easiest way to customize the odoo website. We will see how to create dynamic snippets for Odoo. We can create content-based snippets on database values. Let's look at a simple example of how to create a dynamic snippet in Odoo.

How to create a dynamic snippet?

Dynamic snippets are snippets where the contents are changed whenever there is a change in the backend or the data source. To create a dynamic snippet we need to create an XML file for defining the view, A python controller to get the data from the odoo backend, and a Javascript file for displaying the content from the backend on the website. Consider the following steps to create a new dynamic snippet that shows a list of products:

  • Controller:
  • First let us create a controller to fetch data from the backend. For this example let's get the total sold.

    from odoo import http
    from odoo.http import request
    class Sales(http.Controller):
       @http.route(['/total_product_sold'], type="json", auth="public")
       def sold_total(self):
           sale_obj = request.env['sale.order'].sudo().search([
               ('state', 'in', ['done', 'sale']),
           total_sold = sum(sale_obj.mapped('order_line.product_uom_qty'))
           return total_sold
  • XML:
  • First, we need to define the content of the snippet as in the static snippet.

    <template id="basic_snippet" name="Dynamic Snippet">
        <section class="container dynamic_snippet_blog">
            <div class="row">
                <div class="col-md-12">
                    <h1>Dynamic Snippet</h1>
                    Total Products Sold: <span id="total_sold"/>

    Here we created as span with id total_sold to show the total number of products sold.The value will be fetched in Javascript and will render here. After defining the view we need to add this to the website builder snippet blocks.

  • To do that, we need to inherit the website.snippets and add our snippet inside that as in the static snippet.
  • <template id="external_snippets" inherit_id="website.snippets" priority="8">
        <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
            <t t-snippet="basic_snippet_blog.basic_snippet"/>

    This time we are adding the snippet inside Dynamic section.

  • JS:
  • For getting the data from the server and view it on the website we will use the JavaScript.

    odoo.define('basic_snippet_blog.dynamic', function (require) {
       var PublicWidget = require('web.public.widget');
       var rpc = require('web.rpc');
       var Dynamic = PublicWidget.Widget.extend({
           selector: '.dynamic_snippet_blog',
           start: function () {
               var self = this;
                   route: '/total_product_sold',
                   params: {},
               }).then(function (result) {
       PublicWidget.registry.dynamic_snippet_blog = Dynamic;
       return Dynamic;

    Here we are giving the class of the section as selector, and we are fetching the value from the controller using rpc.

  • Now we need to add the xml file to the data section and js file in assets section of the file.
  • "data": [
    'assets': {
       'web.assets_frontend': [

    After installing or updating the module, go to website and click on edit button. Now we can see the snippet under Dynamic Content.



Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message