Create Dynamic Snippet in Odoo

/
Odoo Theme/
Create Dynamic Snippet in Odoo

In this tutorial, you will learn how to create dynamic snippets in Odoo from scratch. Unlike static snippets, dynamic snippets are used for content that are coming from the database or other sources. You will learn starting from creating new model, views, menus, security, controllers and snippet options using javascript.

Create a new Model

First we need to create a new model for our cities to store some data which will be used fo our dynamic snippet. Under our module directory "theme_yourhome", create a new directory and name it "models". Inside that folder, create two files __init__.py and yh_cities.py.

In __init__.py, we will use this to import all models, but in this case we only have yh_cities.py. Copy the code below:

Under yh_cities.py, copy the code below to create our model. We will only need models and fields from odoo.

theme_yourhome/models/yh_cities.py

py

from odoo import models, fields


class YourHomeCities(models.Model):
    _name = 'yh.cities'
    _description = 'Your Home Cities'

    country_id = fields.Many2one('res.country', string='Country')
    state_id = fields.Many2one('res.country.state', domain="[('country_id', '=?', country_id)]", string='City/State')
    description = fields.Text()
    image = fields.Binary()

Don't forget to add our models to the main init file "theme_yourhome/__init__.py" and copy the code below.

Restart Odoo then go back to backend and update our theme under Settings -> Website -> Pick a Theme. To check if the models was successfully created, activate debug mode and go to Settings -> Technical -> Models and search yh.cities. You should see one record like below:

In order for us to add a new record into this model, we need to have a user interface by adding a new menu under website module. Under "theme_yourhome/views", create a new file yh_cities.xml and copy the code below. Don't forget to add it in the manifest file.

theme_yourhome/views/yh_cities.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<data>
    <!-- Cities form view -->
    <record id="yh_cities_form_view" model="ir.ui.view">
        <field name="name">yh.cities.form.view</field>
        <field name="model">yh.cities</field>
        <field name="arch" type="xml">
            <form string="Cities">
                <sheet>
                    <field name="image" widget="image" class="oe_avatar"/>
                    <group>
                        <field name="country_id"/>
                        <field name="state_id"/>
                        <field name="description"/>
                    </group>
                </sheet>
            </form>
        </field>
    </record>

    <!-- Cities list or tree view -->
    <record id="yh_cities_tree_view" model="ir.ui.view">
        <field name="name">yh.cities.tree.view</field>
        <field name="model">yh.cities</field>
        <field name="arch" type="xml">
            <tree string="Cities">
                <field name="country_id"/>
                <field name="state_id"/>
                <field name="description"/>
            </tree>
        </field>
    </record>

    <!-- Cities Action for city submenu -->
    <record id="yh_cities_action" model="ir.actions.act_window">
        <field name="name">Cities</field>
        <field name="type">ir.actions.act_window</field>
        <field name="res_model">yh.cities</field>
        <field name="view_mode">tree,form</field>
        <field name="help" type="html">
            <p class="o_view_nocontent_smiling_face">No Cities yet!</p>
            <p>Please add a new city!</p>
        </field>
    </record>

    <!-- YourHome Root Menu -->
    <menuitem id="yh_root_menu"
    name="Your Home"
    sequence="85"
    parent="website.menu_website_configuration"/>

    <!-- Cities Submenu -->
    <menuitem id="yh_cities_menu"
    name="Cities"
    sequence="1"
    parent="yh_root_menu"
    action="theme_yourhome.yh_cities_action"/>
</data>
</odoo>

In order for our menu to show, it needs to have a security. Otherwise, it will not show. Under our module "theme_yourhome", create a new folder "security" and inside it, create a new file "ir.model.access.csv". Copy the code below and paste it in this new file.

In the code above, we simply saying that this model is accessible to all for read, write, create and delete since we did not add any group. Don't forget to add our security in the manifest file and add it as first inside data.

Restart Odoo and update our theme. Go back to browser and go to website module main menu. You should see now Your Home with cities as submenu.

Create new template for dynamic snippet

Now that we have done our model and able to add new data, let's now create template for our dynamic snippet. Under "theme_yourhome/views/snippets", create a new file "explore-cities.xml" and copy the code below.

theme_yourhome/views/snippets/explore-cities.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<!-- template for our snippet -->
<template id="explore_cities" name="Explore Cities - Dynamic">
        <section class="explore-cities">
            <div class="container">
                <div class="text-center py-5">
                    <h2 class="h1">Explore Cities</h2>
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, 
                      print, and publishing industries for <br/>previewing layouts and visual mockups.</p>
                </div>

    <!-- element to store list of cities using JS -->
    <div class="row justify-content-center" id="yh-cities-row"/>
            </div>
        </section>
    </template>

    <!-- To be used in JS for snippet options -->
    <template id="explore_cities_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='Box']" position="before">
            <div data-js="ExploreCitiesOptions" data-selector=".explore-cities" data-drop-in=".o_mega_menu nav">
            </div>
        </xpath>
    </template>
</odoo>

Don't forget to add this in our manifest file just before snippets.xml.

In order for this to show in our snippets list, we need to add it in snippets.xml Open https://github.com/alferjay/odoo_theme_yourhome/blob/master/theme_yourhome/views/snippets/snippets.xml. For the icon used, kindly check this link Open https://github.com/alferjay/odoo_theme_yourhome/blob/master/theme_yourhome/static/src/img/snippets/explore-cities.svg.

theme_yourhome/views/snippets.xml

xml

<template id="custom_snippets" inherit_id="website.snippets" name="Custom Snippets">
    <xpath expr="//div[@id='snippet_structure']" position="before">
        <div id="snippet_structure" class="o_panel">
            <div class="o_panel_header">YourHome</div>
            <div class="o_panel_body">
                <!-- ... -->
                <t t-snippet="theme_yourhome.explore_cities" t-thumbnail="/theme_yourhome/static/src/img/snippets/explore-cities.svg">
                    <keywords>explore, cities</keywords>
                </t>
            </div>
        </div>
    </xpath>
</template>

Restart Odoo and update our theme. Go to home page, reload the page and click edit on right upper corner of the page. You should see our new dynamic snippet "Explore Cities - Dynamic".

Create new controller in returning all cities from backend

Now that we have prepared our snippet template, we can create a new controller which will be used in giving us all the cities we need from backend. Under folder "theme_yourhome", create new folder and name it "controllers". Inside this folder, create new file __init__.py which will be used in importing all controllers inside that folder and "explore_cities.py" for our cities controller.

Under "explore_cities.py", copy the code below:

Copy code below to import our model to __init__.py

Don't forget to add our controllers to our main __init__.py file under main folder "theme_yourhome". Copy the code below:

To test if our controller is working fine, restart Odoo and go back to browser and update theme. Open a new tab and type in the url http://localhost:8069/cities. You should see an error Method not Allowed.

This is because we defined our controller to only accept content type as json and method as post. In order to check our result, we need to use postman. In postman, use the following details:

Method: POST
Link: http://localhost:8069/cities
Headers: use key (Content-Type) with value application/json
Body: use raw and add empty object

Click Send and you can see above that we have successfully get all cities from backend.

Add new javascript to fetch data from backend and change the snippet content

To change the content of our snippet, we need to add a javascript file. Under folder "theme_yourhome/static/src/js", add a new file and name it as "explore-cities.js". Copy the code below and paste it in this new file.

theme_yourhome/static/src/js/explore-cities.js

js

/** @odoo-module **/

import publicWidget from "web.public.widget";

publicWidget.registry.YhCities = publicWidget.Widget.extend({
    selector: ".explore-cities",
    start() {
        let citiesRow = this.el.querySelector("#yh-cities-row")

        if (citiesRow){
            this._rpc({
                route: "/cities/",
                params:{}
            }).then(data=>{
                let html = ""
                data.forEach(city=>{
                    html += `<div class="col-lg-3 mb-5">
                        <div class="d-flex align-items-center">
                            <div class="img-container mr-3 rounded">
                                <img class="country-image rounded" src="data:image/png;base64,${city.image}"/>
                            </div>
                            <div>
                                <h5 class="mb-0">${city.state_id ? city.state_id[1] : ""}</h5>
                                <div>${city.country_id ? city.country_id[1] : ""}</div>
                            </div>
                        </div>
                    </div>`
                })
                citiesRow.innerHTML = html
            })
        }
    },
});

export default publicWidget.registry.YhCities;

From the code above, we use Odoo method _rpc which is used in connecting to our newly created controller. Once we got the data, it will change the content of our snippet by searching any element in our page with with id "yh-cities-row".

Don't forget to add our javascript in our manifest file under assets and web.assets_frontend.

Restart Odoo and update our theme. To test it, edit any page and try to click and drag our snippet. Once you click save, the page will reload and if done loading, all cities from backend will show.

Create snippet options for dynamic snippet

You may have noticed that our cities will only show if you save the page. In order to show the content after adding our snippet to any page (edit stage), we need to add snippet options.

In order to achieve that, we need to edit explore-cities.xml file under "theme_yourhome/views/snippets" folder. Copy and paste the code after template with id "explore_cities". So data-js key here will be used in our javascript file and data-selector is used to select active snippets with class ".explore-cities" while editing snippets.

theme_yourhome/views/snippets/explore-cities.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <!-- ... -->
    <!-- To be used in JS for snippet options -->
    <template id="explore_cities_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='Box']" position="before">
            <div data-js="ExploreCitiesOptions" data-selector=".explore-cities" data-drop-in=".o_mega_menu nav">
            </div>
        </xpath>
    </template>
</odoo>

Finally, let's add a new javascript file under "theme_yourhome/static/js" directory and name it as "explore-cities-options.js". Copy the code and paste it into this file. Basically, it is the same code in explore-cities.js, only difference is, this code will only run when you are editing or adding snippets.

theme_yourhome/static/src/js/explore-cities-options.js

js

/** @odoo-module **/

import options from "web_editor.snippets.options";

options.registry.ExploreCitiesOptions = options.Class.extend({
    start() {
        let citiesRow = this.$target.find("#yh-cities-row")

        if (citiesRow){
            this._rpc({
                route: "/cities/",
                params:{}
            }).then(data=>{
                let html = ``
                data.forEach(city=>{
                    html += `<div class="col-lg-3 mb-5">
                        <div class="d-flex align-items-center">
                            <div class="img-container mr-3 rounded">
                                <img class="country-image rounded" src="data:image/png;base64,${city.image}"/>
                            </div>
                            <div>
                                <h5 class="mb-0">${city.state_id ? city.state_id[1] : ""}</h5>
                                <div>${city.country_id ? city.country_id[1] : ""}</div>
                            </div>
                        </div>
                    </div>`
                })
                citiesRow.html(html)
            })
        }
    },
})

export default {
    ExploreCitiesOptions: options.registry.ExploreCitiesOptions,
};

Don't forget to add it in our manifest file under asset and web.asset_frontend.

Restart Odoo and update our theme. Now try to edit a page and notice after adding our snippet, the content are also showing.

Congratulations! You finished adding dynamic snippets from scratch. Please check the link below to have a more detailed explanation.

Create Dynamic Snippet in Odoo

Create a new Model

Create new menu, action and views

Create new template for dynamic snippet

Create new controller in returning all cities from backend

Add new javascript to fetch data from backend and change the snippet content

Create snippet options for dynamic snippet

Read next article

Todo List App - OWL Javascript Framework Tutorial