DEV Community

Cover image for How To Create a Snippet In Odoo ?
Nirav Parmar
Nirav Parmar

Posted on

How To Create a Snippet In Odoo ?

First of all create a module by scaffold command in your custom_addons folder

Give name snippet [For reference type in terminal: ./odoo-bin scaffold snippet custom_addons)

Now you should see a folder structure in your custom_addons folder like this.

custom_addons/snippet

|----controllers

|----demo

|----models

|----security

|----views

|--__init__.py

|--__manifest.py__
Enter fullscreen mode Exit fullscreen mode

Go to views Directory and create new file named snippet.xml and here we starting with content what we want to see in our snippet when we place it by drag and drop.

Take ‘Template’ tag in ‘Odoo’ tag and write code as below,

<odoo>
   <template id="snippet_testimonial" name="Features">
      <section class="snippet_testimonial">
         <div class="container">
            <div class="row">
               <p>Place Your Snippet Content Here</p>
            </div>
         </div>
      </section>
   </template>
</odoo>
Enter fullscreen mode Exit fullscreen mode

As shown above give snippet id whatever you want to give and name which you want to see in front-end snippet panel.

Then start designing your snippet here but you need .scss or .css file to stylize your snippet.
Create Directory named 'static' in module and inside it another directory named 'scss' with file named 'main.scss'.

Now go back in your snippet.xml file and call here that .scss file as below.

<template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet">
   <xpath expr="." position="inside">
      <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/>
   </xpath>
</template>
Enter fullscreen mode Exit fullscreen mode

In this main.scss file you can write your style properties for snippet.Till now you created snippet design so we will place it in snippet section of front-end.

For it we have to give xpath of base snippet module as below.

<template id="you_snippet_id" inherit_id="website.snippets" name="new snippets">
   <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
      <t t-snippet="snippet.snippet_testimonial"
         t-thumbnail="/snippet/static/img/logo.png"/>
   </xpath>
</template>
Enter fullscreen mode Exit fullscreen mode

Take another template tag and give inherit_id as a 'website.snippet' & xpath as above.

Take 't' tag and give t-snippet value as template id which you created snippet design means in pur case it is 'snippet_testimonial'.

Set an icon for your snippet. Take any icon size image in your directory 'src' and give path to 't-thumbnail' value of 't' tag.

Finally your xml file will look like

<odoo>
   <template id="snippet_testimonial" name="Features">
      <section class="snippet_testimonial">
         <div class="container">
            <div class="row">
               <p>Place Your Snippet Content Here</p>
            </div>
         </div>
      </section>
   </template>
   <template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet">
      <xpath expr="." position="inside">
         <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/>
      </xpath>
   </template>
   <template id="you_snippet_id" inherit_id="website.snippets" name="new snippets">
      <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
         <t t-snippet="snippet.snippet_testimonial"
            t-thumbnail="/snippet/static/img/logo.png"/>
      </xpath>
   </template>
</odoo>
Enter fullscreen mode Exit fullscreen mode

Now you are done and save your file

Restart your server

You will find your snippet in front-end of the website.

Resource link: https://www.candidroot.com/blog/our-candidroot-blog-1/how-to-create-a-snippet-in-odoo-545

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay